未捕获的类型错误:无法读取未定义的反应状态项的属性“toUpperCase" [英] Uncaught TypeError: Cannot read property 'toUpperCase' of undefined react state item

问题描述

我是 React 和 Javascript 的新手，我正在尝试渲染以下 React 组件:

'use strict';var React = require('react');从 './toreadlist.js' 导入 ToReadList；var ToRead = React.createClass({getInitialState:函数(){返回{书名:[]}；},句柄提交:函数(e){e.preventDefault();this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput).value.trim());this.setState({items: this.state.bookTitles});},渲染:函数(){返回 (<div><form onSubmit={this.handleSubmit}><input type="text" ref="bookTitleInput"></input><input type="submit"></input></form><ToReadList bookTitles={this.state.bookTitles}/>

);}});module.exports = ToRead;

但我的控制台出现以下错误:未捕获的类型错误:无法读取未定义的属性‘toUpperCase’"

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

this.state.bookTitles.push()

导致错误.

请帮忙！

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

function autoGenerateWrapperClass(type) {返回 ReactClass.createClass({标签名称:type.toUpperCase(),渲染:函数(){返回新的 ReactElement(类型，空值，空值，空值，空值，this.props);}});}

解决方案

对于这篇文章的质量不佳，我深表歉意.

我解决了这个问题.

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

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

有问题的代码如下:

'use strict';var React = require('react');从 './todoreadlistitem.js' 导入 {ToReadListItem}；var ToReadList = React.createClass({渲染:函数(){返回 (
{this.props.bookTitles.map(function(bookTitle){返回 (
<ToReadListItem bookTitle={bookTitle} isChecked={false}/></li>);})}</ul>);}});module.exports = ToReadList;

改变这一行:

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

为此:

从'./todoreadlistitem.js'导入ToReadListItem；

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

我希望我能帮助把事情弄清楚.

I'm new to React and Javascript and I'm trying to render the following React component:

'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;

But I am having the following error on my console: "Uncaught TypeError: Cannot read property 'toUpperCase' of undefined"

I tried to debug (because the error is obscure to me and no line in my code is indicated) and noticed that this particular line:

this.state.bookTitles.push()

causes the error.

Please help!

Edit The error is caused by a webpack var injection function:

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

解决方案

My appologies for the poor quality of this post.

I resolved the issue.

Finally, the problem came from the included component:

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

The error appeared when this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput).value.trim()); was called because bookTitles triggers the error inside the component when it is not empty (i.e <ToReadList bookTitles={["mastery", "foundation"]} /> triggers exactly the same error)

The compenent in question's code is as such:

'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;

Changing this line:

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

To this:

import ToReadListItem from './todoreadlistitem.js';

I know, it is not a great idea to mix es6 syntax with flat one, but I permit myself doing it since the app is for experimentation purposes.

I hope I helped to make things clearer.

这篇关于未捕获的类型错误:无法读取未定义的反应状态项的属性“toUpperCase"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！