reactjs - 在更改期间是否将 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 尽管它的默认值?
解决方案
它没有,但如果你不想抛出错误,你可以为questions
. 然后,您的代码中的其他内容不起作用。跟踪导致的整个数据流,questions
您可能会得到答案
(questions || []).map
推荐阅读
- sql-server - 如何在 ssis 中将 dt_date yyyy-mm-dd 转换为 dt_date yyyy/MM/dd?
- java - “hasNextInt()”和“nextInt()”方法的顺序
- google-cloud-platform - 无法通过 cloudbuild 部署到 cloudrun
- python - Python:删除 CSV 中的“中间行”换行符
- python - 如何在我的 for 循环中修复此 AttributeError
- java - 如何为连接器编写单元测试?
- react-native - @React-native-community/react-native-device-info:NativeModule.RNDeviceInfo 为空。要解决此问题,请执行以下步骤: *Run 'react-native link
- php - 如何在搜索页面上删除确认表单重新提交
- azure - 无法在受限 Internet 中创建 Azure 资源组项目
- powershell - 如何以任何屏幕分辨率使 GUI 形式的图片始终位于中心?