首页 > 解决方案 > 在更改期间是否将 React 状态属性设置为未定义?

问题描述

我已将此状态设置为默认值:

this.state = {
  topic: ' ',
  questions: [],
  answers: [[' ']],
  types: [' '],
};

然后我设置了一个 AJAX 调用,并组织了所有内容,这样就可以填充了。

loadBody() {
 axios.get(`/api/getSurveyBody/${this.props.match.params.id}`)
  .then((result) => {
    this.loadQuestions(result.data);
    this.loadAnswers(result.data);
    this.loadTypes(result.data);
  })
  .then((error) => {
    console.log(error);
  });
}

loadAnswers(array) {
   const answers = array.map(element => ([
     element.answer1,
     element.answer2,
     element.answer3,
     element.answer4,
    ]));
   this.setState({ answers });
}

后来我传递了这些值并在另一个组件中读取它们,如下所示:

{questions.map((element, index, array) => (
  <div className="question" key={keyIndex(array, index)[index].id}>
    <h3>
      {element}
    </h3>
    { answers[index] } //Here is console.log() showed on the image
  </div>
))}

问题在于,尽管已经设置了默认值,但我遇到了一个未定义答案的错误。我记录了它并看到了这个:

在此处输入图像描述

这几乎是正确的,第一个日志应该是默认的,第二个应该是这四个明确的字符串,第三个应该是这四个句子。我想知道为什么它看起来像answers数组突然设置为 undefined 尽管它的默认值?

标签: reactjs

解决方案


它没有,但如果你不想抛出错误,你可以为questions. 然后,您的代码中的其他内容不起作用。跟踪导致的整个数据流,questions您可能会得到答案

(questions || []).map

推荐阅读