Ошибка: пытаетесь распечатать элементы массива в компоненте React Function?

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)}

Я думаю, что здесь происходит то, что ваш выбор из базы данных не сделан, первый компонент нарисован, поэтому он терпит неудачу. С этой проверкой он доживет до второго обновления при получении данных.