我有一个包含对象的数组,位于对象内部。 我可以 console.log 第一个对象和数组,但是当我尝试访问数组中的对象或在数组上使用映射函数时,我收到一条错误,提示“无法读取未定义的属性”。
我已经彻底搜索了SO和其他网站上的类似问题,并找到了一些,但似乎没有答案对我有用。
该对象看起来像这样:
{
answers: [{…}],
createdAt: "2019-01-23T10:50:06.513Z",
nested: {kebab: "jjjj", sås: 2, sallad: "kkk"},
text: "weaxcc",
/* etc... */
}
我可以使用以下方式访问它:this.state.data
我想访问答案数组中的对象,例如:
this.state.data.answers[0].text
甚至:
this.state.data.answers.map().....
但这给了我“无法读取未定义的属性‘0’”。答案数组不为空。
感谢任何帮助!
编辑 这就是对象最终进入我的状态的方式。
getQuestionFromDb = () => {
axios.get(`http://localhost:3000/questions/${this.state.id}`)
.then(res => this.setState({
data: res.data
}));
};
此函数在 ComponentDidMount() 方法中调用。
这是我的渲染函数(console.log 导致错误):
render() {
return (
<div className="main-content">
<h2>{this.state.data.text} </h2>
{console.log(this.state.data.answers[0].text)}
<p>Introducing <strong>{this.state.id}</strong>, a teacher who loves teaching courses about <strong>{this.state.id}</strong>!</p>
<input
type="text"
onChange={e => this.setState({ message: e.target.value })}>
</input>
<button onClick={() => {this.handleAnswerPost(this.state.message)}}>Answer</button>
</div>
);
}
}
最佳答案
当您的组件成为 DOM 的一部分时,componentDidMount
就会被调用,但由于 XHR,您填充状态的调用是异步的,这可能需要 100-300 毫秒以上才能获取您的数据组件,因此 this.state.data.answers
在初始 render()
周期中不可用。
既然你提到使用循环,我建议设置一个初始状态形状,如
this.state = {
data: {
answers: []
}
}
您的初始渲染不会有任何循环,但一旦解析数据并设置新状态,它将正确渲染。
或者你也可以
return this.state.data.answers.length ? loopItemsHere : <div>Loading..</div>
显然,loopItemsHere
可以是您为显示答案而编写的任何内容。
关于javascript - 包含对象的数组,在对象内是未定义的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54327563/