javascript - 一个包含对象的数组，在一个对象内是未定义的

Question

我有一个包含对象的数组，在对象内部。我可以 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>
    );
  }
}

Answer 1

componentDidMount 在您的组件成为 DOM 的一部分时被调用，但由于 XHR 的原因，您为填充状态所做的调用是异步的，这可能需要 100-300 毫秒以上才能获取您的数据组件，因此 this.state.data.answers 在初始 render() 周期中将不可用。

既然你提到了使用循环，我建议设置一个像这样的初始状态形状

this.state = { 
  data: { 
    answers: [] 
  } 
}

您的初始渲染不会有任何循环，但一旦它解析数据并设置新状态，它就会正确渲染。

或者你可以

return this.state.data.answers.length ? loopItemsHere : <div>Loading..</div>

显然，loopItemsHere 可以是您为显示答案而编写的任何内容。