未捕獲的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()使用實際上在null上調用的toUpperCase()函數。

例

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

如果你可以發布findDOMNode()代碼，我們可以找出錯誤。

要么

確保在non-null object上調用toUpperCase() 。

Answer 2

我對這篇文章質量差的看法。

我解決了這個問題。

最后，問題來自包含的組件：

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

this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput).value.trim());出現錯誤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語法與平面語法混合起來並不是一個好主意，但我允許自己這樣做，因為該應用程序是出於實驗目的。

我希望我幫助讓事情更清楚。

Answer 3

我想這個問題是因為你試圖直接修改狀態。 嘗試這個：

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

我希望它能解決你的問題。

Answer 4

導入名稱不正確的組件給了我同樣的錯誤。

我把它導入為var AreaChart = Charts.AreaChart;

在Charts.js它以小'c'導出：

Areachart: Areachart

將其更改為AreaChart: Areachart導出時AreaChart: Areachart中的Charts.js解決了它。