我正在尝试构建一个简单的 Todo 应用程序,但是抛出一个错误: 请有人帮忙找出错误吗?
错误
app.min.js:9 Uncaught TypeError: Cannot read property 'data' of undefined at Object.value [as addNewContact] (http://localhost:8888/dist/assets/js/app.min.js:9:18059) at b.value (http://localhost:8888/dist/assets/js/app.min.js:9:19043) at Object.f.invokeGuardedCallback (http://localhost:8888/dist/assets/js/app.min.js:3:5790) at g (http://localhost:8888/dist/assets/js/app.min.js:3:3021) at Object.h [as executeDispatchesInOrder] (http://localhost:8888/dist/assets/js/app.min.js:3:3241) at l (http://localhost:8888/dist/assets/js/app.min.js:2:30755) at n (http://localhost:8888/dist/assets/js/app.min.js:2:30881) at Array.forEach (native) at c (http://localhost:8888/dist/assets/js/app.min.js:3:6210) at Object.processEventQueue (http://localhost:8888/dist/assets/js/app.min.js:2:31947
代码:
import React from 'react';
import ReactDOM from 'react-dom';
export class ContactsListApp extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
}
}
addContact(newContactObj) {
console.log(newContactObj);
var tmpStateData = this.state.data;
tmpStateData.push(newContactObj.value);
this.setState({
data: tmpStateData
});
}
render() {
return (
<div className="contact-list">
<div className="container">
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12">
<AddContactPanel addNewContact={this.addContact} />
<ContactList contacts={this.state.data} />
</div>
</div>
</div>
</div>
)
}
}
class ContactList extends React.Component {
render() {
var items = Array.prototype.map.call(this.props.contacts, function (contact, index) {
return <ContactItem name={contact.name} key={index} />
});
return (
<ul>{items}</ul>
)
}
}
class AddContactPanel extends React.Component {
constructor(props) {
super(props);
}
handleAddContact() {
var contactItem = this.refs.newContactName;
this.props.addNewContact({
"_id": (Math.random(1000 * 10) + 1),
"name": this.refs.newContactName.value,
"occupation": "myJob",
"email": "me@hotmail.com",
"telephone": "0123456789"
});
}
render() {
return (
<div className="row">
<form>
<input required ref="newContactName" type="text" name="newContactName" />
<input type="submit" name="submit" onClick={this.handleAddContact.bind(this)} />
</form>
</div>
)
}
}
class ContactItem extends React.Component {
render() {
return (
<li>{this.props.name}</li>
)
}
}
module.exports = {
contactListApp: ContactsListApp
}
提前致谢!
最佳答案
首先为了使状态可用于您需要绑定(bind)它的函数。您可以使用 fat-arrow 函数来实现此目的
addContact(newContactObj) {
console.log(newContactObj);
var tmpStateData = this.state.data;
tmpStateData.push(newContactObj.value);
this.setState({
data: tmpStateData
});
}
其次:将 props 设置为初始状态是一种反模式,如 react docs 所建议的那样。你应该避免这样使用它。相反,您可以在 componentDidMount 函数中将状态设置为 prop 值,例如
constructor(props) {
super(props);
this.state = {
data: ''
}
}
componentDidMount() {
this.setState({data: this.props.data})
}
addContact = (newContactObj) => {
console.log(newContactObj);
var tmpStateData = this.state.data;
tmpStateData.push(newContactObj.value);
this.setState({
data: tmpStateData
});
}
关于javascript - 在 ReactJs 应用程序中无法识别 this.state.data,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41125277/