未定义的数组？ TypeError：无法读取未定义的属性“地图”答案

【问题标题】：Undefined array? TypeError: Cannot read property 'map' of undefined未定义的数组？ TypeError：无法读取未定义的属性“地图”
【发布时间】：2021-08-17 03:36:35
【问题描述】：

我正在尝试使用 reactjs 编写应用程序并遇到上述错误。我相信这意味着我的任务数组是未定义的，但我认为这是已定义的，所以我不确定问题是什么或如何解决它。我认为错误出在涉及.map 的数组周围。谢谢！

import React from 'react';
import Task from './Task.js';

export default ({ tasks }) => {
  return (
    <ul className="list-group">
      {tasks.map(task => (
        <li key={task.id} className="list-group-item">
          <Task task={task} />
        </li>
      ))}
    </ul>
  );
}

【问题讨论】：

渲染此组件时是否传递了任务道具？道具的价值是什么？
是的，我相信。我的主应用程序代码包含一个 const，它用一些填充项定义任务。从“反应”导入反应；从'./TaskList.js'导入任务列表； function App() { const tasks = [ {id: 0, description: 'do this', done: false}, {id: 1, description: 'do that', done: false}, ];返回 (

); } 导出默认应用；
错误告诉您 tasks 属性值未定义。您能否更新您的问题以包括呈现此组件的父组件以及 tasks 值来自何处？

标签： arrays reactjs dictionary undefined

【解决方案1】：

您提供的代码完全没问题。

但是如果您从 api 获取列表并将其设置为状态，那么您的问题是，在第一次渲染时，任务数组将是未定义的，您需要处理它，可能添加加载指示器或将默认值添加为空数组用于任务道具。

import React from "react";

const TaskList = ({ tasks = [] }) => {
  return (
    <ul className="list-group">
      {tasks.map((task) => (
        <li key={task.id} className="list-group-item">
          {task.description}
        </li>
      ))}
    </ul>
  );
};

function App() {
  const tasks = [
    { id: 0, description: "do this", done: false },
    { id: 1, description: "do that", done: false }
  ];
  return (
    <div>
      <TaskList tasks={tasks} />
    </div>
  );
}
export default App;

【讨论】：