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

【问题标题】：Uncaught TypeError: Cannot read property 'toUpperCase' of undefined react state item未捕获的类型错误：无法读取未定义反应状态项的属性“toUpperCase”
【发布时间】：2015-08-19 01:13:08
【问题描述】：

我是 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;

但我的控制台出现以下错误：“Uncaught TypeError: Cannot read property 'toUpperCase' of undefined”

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

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
          );
        }
      });
    }

【问题讨论】：

在你的代码中没有.toUpperCase。
你的意思是无处被调用？
this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput));如果上述行有误，请尝试使用常量字符串进行推送。我认为 findDOMNode 正在返回 null 并且 push 正在对其进行某种大写，这会导致错误。
@Biswanath 是的，我试过这个：this.state.bookTitles.push("this is a title");一样。我添加了这个：console.log(React.findDOMNode(this.refs.bookTitleInput)) 并且输入被正确打印。值得注意的是，这段代码 (this.state.bookTitles.push("this is a title");) 在 React 0.12 下完美运行，但是当我升级到 0.13 时出现问题
@panther 错误出现在 "function autoGenerateWrapperClass(type) { return ReactClass.createClass({ tagName: type.toUpperCase(), " WEBPACK VAR INJECTION 的代码

标签： javascript reactjs webpack

【解决方案1】：

findDOMNode() 使用 toUpperCase() 函数，该函数实际上是在 null 上调用的。

示例

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

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

或

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

【讨论】：

我添加了这段代码：console.log(React.findDOMNode(this.refs.bookTitleInput).value.trim());打印输入内容。错误发生在 webpack var injection "function autoGenerateWrapperClass(type) { return ReactClass.createClass({ tagName: type.toUpperCase(), ..." function

【解决方案2】：

我对这篇文章质量不佳表示歉意。

我解决了这个问题。

最后，问题出在包含的组件上：

<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 ToReadListItem = require('./todoreadlistitem.js');？
为了尝试新事物 ;)

【解决方案3】：

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

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

希望它能解决你的问题。

【讨论】：

在 OP 回答他的问题之前我要说这个。直接修改状态会产生未定义的行为。 +1
问题已解决。但是我考虑到你的评论特别是这里采用了相同的方法facebook.github.io/react/docs/…

【解决方案4】：

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

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

在Charts.js 中，它是用一个小“c”导出的：

Areachart: Areachart

在导出时将其更改为Charts.js 中的AreaChart: Areachart 解决了它。

【讨论】：