我有一个包含对象的数组,在一个对象中。我可以对第一个对象和数组进行控制台日志记录,但是当我尝试访问数组中的对象或使用数组上的映射函数时,我收到一个错误,上面写着“无法读取未定义的属性”。
我彻底搜索了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
}));
};
此函数在ComponentDimMount()-方法中调用。
这是我的渲染函数(控制台. 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的一部分时,会调用this.state.data,但由于XHR的原因,填充状态的调用是异步的,这可能需要100-300ms才能获取组件中的数据,因此
this.state.data。
既然你提到使用循环,我建议设置一个初始状态形状,比如
this.state = {
data: {
answers: []
}
}
您的初始渲染不会有任何循环,但一旦它解析数据并设置新状态,它就会正确渲染。
或者你可以
return this.state.data.answers.length ? loopItemsHere : <div>Loading..</div>
显然,loop ItemsThis
可以是您为显示答案而编写的任何内容。
当数据在组件的第一个挂载处不包含答案[]
时,这可能不起作用。
您可能需要检查数组的存在,如下所示:
const { data } = this.state;
data.hasOwnProperty('answers') && console.log(data.answers[0]);
我们不能在Javascript中访问对象键的原因,通常是因为变量/值不是Object的类型。请确保this.state.data
类型是Object。您可以尝试控制台. log(typeofthis.state.data)
。我们应该期望它是输出object
。如果类型是string
,您应该首先使用JSON.parse()
解析它。