javascript - 在 react 中如何避免这种类型的错误？

Question

大家好，我正在这里从事 ReactJS 项目，如果您想帮助我，我有一个问题，谢谢您的帮助 我传递了我的数据<StoryMap data={this.state.data} />到我的函数，这样我就可以将事件和任务推送到行为和任务“json 格式”

function StoryMap(props) {
  var acts = [];
  var taskss = [];

  for (var i = 0; i < props.data.activities.length; i++) {
    acts.push(props.data.activities[i]);
    console.log(acts)
    for (var j = 0; j < props.data.activities[i].tasks.length; j++) {
      taskss.push(props.data.activities[i].tasks[j]);
      console.log(taskss)

    }
  }
  console.log(acts);
  return (
    <table border="1">
      <tr></tr>
    </table>
  );
}

在控制台输出中，console.log 工作正常，但有错误 × 类型错误:无法读取未定义的属性“长度”

error

Answer 1

您需要在使用之前检查 props.data.activities 是否存在，因为在初始渲染期间 this.state.data 在父组件中最初可能为空，并且您可以稍后再填充它

function StoryMap(props) {
  var acts = [];
  var taskss = [];

  if(props.data.activities) {
    for (var i = 0; i < props.data.activities.length; i++) {
      acts.push(props.data.activities[i]);
      console.log(acts)
      for (var j = 0; j < props.data.activities[i].tasks.length; j++) {
        taskss.push(props.data.activities[i].tasks[j]);
        console.log(taskss)

      }
    }
  }
  console.log(acts);
  return (
    <table border="1">
      <tr></tr>
    </table>
  );
}