React Cart组件出现TypeError: data.map is not a function报错求解

调用map方法的data变量不是数组类型。从控制台输出可以看到，从details中解构得到的data是一个格式为{data: Array(3)}的普通对象，真正需要渲染的列表数组存储在该对象的data属性下。普通JavaScript对象不存在数组原型上的map方法，因此执行data.map()时会抛出data.map is not a function的类型错误。
这个问题本质是取值路径和实际数据结构不匹配，通常是接口返回数据存在嵌套层级，代码取值时少访问了一层属性导致的。

修正取值路径，拿到真正的数组类型数据再调用map，同时建议给数组设置空数组兜底，避免数据未返回时出现同类报错。
修复后的完整组件代码如下：

const Cart = ({ details }) => {
  // 对应嵌套结构解构，将真正的列表数组重命名为todoList避免命名混淆，同时加空数组兜底
  let { loading, data: { data: todoList = [] } } = details;

  console.log(todoList);

  return (
    <div>
      {loading ? (
        <p>Load</p>
      ) : (
        <table>
          <thead>
            <tr>
              <th>Id</th>
              <th>Title</th>
              <th>Completed</th>
            </tr>
          </thead>
          <tbody>
            {todoList.map((d) => {
              return (
                <tr key={d.id}>
                  <td>{d.id}</td>
                  <td>{d.title}</td>
                  <td>{d.completed ? "OK" : ""}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      )}
    </div>
  );
};

export default Cart;

如果不想调整解构逻辑，也可以直接在渲染时取对内层属性，写法如下：

// 原解构逻辑保持不变
let { loading, data } = details;
// 渲染时通过可选链取内层数组，无数据时不渲染列表内容
{data?.data?.map((d) => {
  // 原有行渲染逻辑不变
})}

内容的提问来源于stack exchange，提问作者kartikay dwivedi