Javascript 未捕获的类型错误：无法读取未定义的反应状态项的属性“toUpperCase”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30643604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'toUpperCase' of undefined react state item
提问by Mayas
I'm new to React and Javascript and I'm trying to render the following React component:
我是 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;
But I am having the following error on my console: "Uncaught TypeError: Cannot read property 'toUpperCase' of undefined"
但是我的控制台上出现以下错误：“未捕获的类型错误：无法读取未定义的属性 'toUpperCase'”
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!
请帮忙！
EditThe error is caused by a webpack var injection function:
编辑该错误是由 webpack var 注入函数引起的：
function autoGenerateWrapperClass(type) {
return ReactClass.createClass({
tagName: type.toUpperCase(),
render: function() {
return new ReactElement(
type,
null,
null,
null,
null,
this.props
);
}
});
}
采纳答案by Mayas
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 bookTitlestriggers the error inside the component when it is not empty (i.e <ToReadList bookTitles={["mastery", "foundation"]} />triggers exactly the same error)
this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput).value.trim());调用时出现错误是因为bookTitles在组件内部不为空时触发错误（即<ToReadList bookTitles={["mastery", "foundation"]} />触发完全相同的错误）
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.
我知道，将 es6 语法与扁平语法混合并不是一个好主意，但我允许自己这样做，因为该应用程序用于实验目的。
I hope I helped to make things clearer.
我希望我有助于使事情更清楚。
回答by Uma Kanth
findDOMNode()uses the toUpperCase()function which actually is called on a null.
findDOMNode()使用toUpperCase()实际在空值上调用的函数。
Example
例子
var x = null
x.toUpperCase()// results in this error.
If you could post the findDOMNode()code, we could trace out the error.
如果您可以发布findDOMNode()代码，我们可以找出错误。
OR
或者
Make sure that the toUpperCase()is called on a non-null object.
确保toUpperCase()在 a 上调用non-null object。
回答by Phi Nguyen
I guess the problem is because you try to modify the state directly. Try this:
我猜问题是因为您尝试直接修改状态。尝试这个：
var newBookTitles = this.state.bookTitles;
var value = React.findDOMNode(this.refs.bookTitleInput).value.trim();
newBookTitles.push(value);
this.setState({bookTitles: newBookTitles});
I hope it will solve your problem.
我希望它能解决你的问题。
回答by avck
Importing component with incorrect name gave me the same error.
导入名称不正确的组件给了我同样的错误。
I had imported it as
var AreaChart = Charts.AreaChart;
我已经将它导入为
var AreaChart = Charts.AreaChart;
where as in Charts.jsit was exported with a small 'c' :
其中，Charts.js它是用一个小的 'c' 导出的：
Areachart: Areachart
Areachart: Areachart
Changing it to AreaChart: Areachartin Charts.jswhile exporting solved it.
导出时将其更改为AreaChart: AreachartinCharts.js解决了它。
