React中使用GET方法请求Mongo后端数据报users.map is not a function如何解决

问题原因 #

• 你直接将后端返回的完整响应对象赋值给了users状态，而需要的用户数组实际嵌套在响应对象的data.users字段中，此时users是对象类型不是数组，自然没有map方法，就会报users.map is not a function错误。
• 用jsonplaceholder测试正常是因为该接口直接返回数组结构，和你自己后端返回的嵌套结构不一致。
• 另外后端返回的用户唯一标识是_id不是id，渲染时key取值需要对应修改；且setUsers是异步更新，调用后立刻打印users拿到的还是更新前的旧值，不要被日志输出误导。

修正后的代码 #

import React, { useEffect, useState } from "react";

const Get = () => {
  const [users, setUsers] = useState([]);
  const getAllUser = async () => {
    const response = await fetch("/get");
    const resData = await response.json();
    // 仅提取嵌套的用户数组赋值
    setUsers(resData.data.users);
  };

  useEffect(() => {
    getAllUser();
  }, []);

  return (
    <>
      {users.map((ce) => (
        // 用后端返回的_id作为唯一key
        <div key={ce._id}>
          <h2>{ce.name}</h2>
          <p>{ce.email}</p>
        </div>
      ))}
    </>
  );
};

export default Get;

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