我是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;
但是我的控制台上出现以下错误:&#34; 未捕获的TypeError:无法读取属性&#39; toUpperCase&#39;未定义的&#34;
我尝试调试(因为错误对我来说不明显,并且我的代码中没有指示行)并注意到这一特定行:
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
);
}
});
}
答案 0 :(得分:5)
我对这篇文章质量差的看法。
我解决了这个问题。
最后,问题来自包含的组件:
<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语法与平面语法混合起来并不是一个好主意,但我允许自己这样做,因为该应用程序是出于实验目的。
我希望我帮助让事情更清楚。
答案 1 :(得分:4)
findDOMNode()
使用实际在null上调用的toUpperCase()
函数。
示例强>
var x = null
x.toUpperCase()// results in this error.
如果您可以发布findDOMNode()
代码,我们可以找出错误。
或强>
确保在toUpperCase()
上调用non-null object
。
答案 2 :(得分:2)
我想问题是因为你试图直接修改状态。试试这个:
var newBookTitles = this.state.bookTitles;
var value = React.findDOMNode(this.refs.bookTitleInput).value.trim();
newBookTitles.push(value);
this.setState({bookTitles: newBookTitles});
我希望它能解决你的问题。
答案 3 :(得分:0)
导入名称不正确的组件给了我同样的错误。
我把它导入了
var AreaChart = Charts.AreaChart;
与Charts.js
中的地方一样,它是通过一个小的&c;#c; :
Areachart: Areachart
导出时将其更改为AreaChart: Areachart
中的Charts.js
解决了它。