未捕获的TypeError:无法读取未定义的反应状态项的属性'toUpperCase'

Question

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

但我在我的控制台上遇到以下错误:" 未捕获的TypeError:无法读取未定义的属性'toUpperCase' "

我试图调试(因为错误对我来说是模糊的,我的代码中没有指示行)并且注意到这个特定的行:

this.state.bookTitles.push()

导致错误.

请帮忙!

编辑 错误是由webpack var injection函数引起的:

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

Answer 1

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

例

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

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

要么

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

Answer 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语法与平面语法混合起来并不是一个好主意,但我允许自己这样做,因为该应用程序是出于实验目的.

我希望我帮助让事情更清楚.