错误：试图在 React 函数组件中打印出数组元素？

Question

尝试记录数组元素，我收到以下错误：

TypeError: 无法读取未定义的属性“0”

但是，当我可以在控制台中记录 project.tasks 数组对象时。但它无法记录元素。

数组似乎存在，因为我可以记录对象但不能记录元素。我很困惑。想法？

代码沙盒：https://codesandbox.io/s/blissful-mclaren-ll5wo

function EditProjectView(props) {
  const [project, setProject] = useState({});

  // get id from params
  const { id } = useParams();

  // syncronously (same time before and then after) renders it will use this hook
  useLayoutEffect(() => {
    // fake* ajax request to database
    const data = database.projects.find((project) => {
      return project.id == 123;
    }, []);

    setProject(data);
  });

  if (project) {
    return (
      <React.Fragment>
        <main style={classes.content}>
          <div style={classes.projectContainer}>
            <div style={classes.projectOverviewWrapper}>
              <Paper elevation={2}>
                <div style={classes.project}>
                  {/* {<ProjectDetailsView project={project} />} */}
                </div>
              </Paper>
            </div>
            <div style={classes.tasksContainer}>
              <h3>ALL TASKS</h3>
              {console.log(
                "prints out array object successfully i.e. [{..}, {..]]  <-------------",
                project.tasks
              )}
              {console.log(
                "does NOT print array object's elements FAIL <-----------",
                project.tasks[0].taskName
              )}
              <TaskExpansionPanel
                panelTitle={
                  <PanelTitle
                  // totalTimeInMinutes={task.totalTimeInMinutes}
                  // taskNumber={task.taskNumber}
                  // taskName={task.taskName}
                  // taskName={project.projectName}
                  />
                }
                panelDetails={<PanelDescription />}
              />
              <CreateTaskBtn />
            </div>
          </div>
        </main>
      </React.Fragment>
    );
  } else {
    return <p>loading..</p>;
  }
}

Answer 1

试试这个

function printTasks(tasks) {
  if (tasks && tasks.length > 0) {
      return ( console.log(tasks[0].taskName));
  } else {
      return "No tasks found";
  }
}

然后在你的组件中调用它来代替你当前的检查。

{printTasks(project.tasks)}

我认为这里发生的情况是，您从数据库中获取的数据没有完成，因为第一次绘制组件，所以它失败了。通过此检查，当获取数据时，它将实时看到第二次更新。