未捕获的类型错误：无法读取未定义的react状态项的属性“toUpperCase”

IT技术 javascript reactjs webpack
2021-05-05 12:41:47

我是 React 和 Javascript 的新手，我正在尝试呈现以下 React 组件：

'use strict';
var React = require('react');
import ToReadList from './toreadlist.js';

var ToRead = React.createClass({
getInitialState: function() {
    return { bookTitles: [] };
},
handleSubmit: function(e) {
    e.preventDefault();
    this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput).value.trim());
    this.setState({items: this.state.bookTitles});
},
render: function() {
    return (<div>
        <form onSubmit={this.handleSubmit}><input type="text" ref="bookTitleInput"></input>
            <input type="submit"></input></form>
            <ToReadList bookTitles={this.state.bookTitles} />
    </div>
           );
}
});

module.exports = ToRead;

但我的控制台出现以下错误：“未捕获的类型错误：无法读取未定义的属性 'toUpperCase' ”

我尝试调试（因为错误对我来说很模糊，并且没有指示我的代码中的任何行）并注意到这一行：

this.state.bookTitles.push()

导致错误。

请帮忙！

编辑 该错误是由 webpack var 注入函数引起的：

function autoGenerateWrapperClass(type) {
      return ReactClass.createClass({
        tagName: type.toUpperCase(),
        render: function() {
          return new ReactElement(
            type,
            null,
            null,
            null,
            null,
            this.props
          );
        }
      });
    }
4个回答

findDOMNode()使用toUpperCase()实际在空值上调用的函数。

例子

var x = null
x.toUpperCase()// results in this error.

如果您可以发布findDOMNode()代码，我们可以找出错误。

或者

确保toUpperCase()在 a 上调​​用non-null object。

我为这篇文章的质量不佳而道歉。

我解决了这个问题。

最后，问题来自于包含的组件：

<ToReadList bookTitles={this.state.bookTitles} />

this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput).value.trim());调用时出现错误是因为bookTitles在组件内部不为空时触发错误（即<ToReadList bookTitles={["mastery", "foundation"]} />触发完全相同的错误）

有问题的代码如下：

'use strict';
var React = require('react');
import {ToReadListItem} from './todoreadlistitem.js';

var ToReadList = React.createClass({
    render: function() {
        return (<ul>
            {this.props.bookTitles.map(function(bookTitle){ 
                return (<li>
                    <ToReadListItem bookTitle={bookTitle} isChecked={false}/>
                </li>);
            })}
        </ul>);
    }

});

module.exports = ToReadList;

改变这一行：

import {ToReadListItem} from './todoreadlistitem.js';

对此：

import ToReadListItem from './todoreadlistitem.js';

我知道，将 es6 语法与扁平语法混合并不是一个好主意，但我允许自己这样做，因为该应用程序用于实验目的。

我希望我有助于使事情更清楚。

我猜问题是因为您尝试直接修改状态。试试这个：

var newBookTitles = this.state.bookTitles;
var value = React.findDOMNode(this.refs.bookTitleInput).value.trim();
newBookTitles.push(value);
 this.setState({bookTitles: newBookTitles});

我希望它能解决你的问题。

导入名称不正确的组件给了我同样的错误。

我已经将它导入为 var AreaChart = Charts.AreaChart;

其中，Charts.js它是用一个小的 'c' 导出的：

Areachart: Areachart

导出时将其更改为AreaChart: AreachartinCharts.js解决了它。

其它你可能感兴趣的问题
上一篇React-router：通过路由传递数据 下一篇react全局组件