提问者:小点点

一个数组的对象,在一个对象是未定义的


我有一个包含对象的数组,在一个对象中。我可以对第一个对象和数组进行控制台日志记录,但是当我尝试访问数组中的对象或使用数组上的映射函数时,我收到一个错误,上面写着“无法读取未定义的属性”。

我彻底搜索了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>
    );
  }
}

共3个答案

匿名用户

当您的组件成为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()解析它。