ReactJs使用Hooks开发CRUD时出现cars.map is not a function报错求助

错误原因 #

TypeError: cars.map is not a function 本质是调用map方法的cars变量不是数组类型，从提供的代码来看存在几个明确问题：

• 状态变量名不匹配：声明的状态是car，但渲染时调用map的是拼写多了s的cars，变量未定义导致值为undefined，无法调用map方法
• 状态初始值可能不符合预期：如果initialState不是空数组，首次渲染时状态不是数组类型，也会触发该报错
• 接口返回值可能不是数组：若后端返回的response.data不是数组结构，赋值给状态后也会导致该错误
• 缺少渲染前的类型校验：调用map前没有对变量类型做判断，异常场景下会直接抛出错误

修复代码 #

1. 修正状态声明与接口请求逻辑 #

// 修正变量名，状态初始值设为空数组，保证初始就是数组类型
const [cars, setCars] = useState([])

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

const retrieveCars =() =>{
  DataService.getAll()
  .then(response => {
    // 先校验接口返回值是不是数组，不是的话默认赋值空数组避免报错
    const resData = Array.isArray(response.data) ? response.data : []
    setCars(resData) 
  })
  .catch(e => {
    console.log(e);
  });
}

2. 修正表格渲染逻辑 #

<tbody>
  {
    // 调用map前先校验cars是数组再执行，同时给遍历的tr元素加唯一key属性，消除React警告
    Array.isArray(cars) && cars.map((data) => (
      <tr key={data.idCars}>
        <th scope="row">{data.idCars}</th>  
        <td>{data.carName}</td>
        <td>{data.carModel}</td>
        <td>
          <Link to={"/classement/update/" + data.idCars} className="btn btn-info">
            Edit
          </Link>
        </td>
      </tr>
    ))
  }
</tbody>

额外说明 #

如果接口返回的数组是嵌套在response.data的某个字段里（比如常见的response.data.list），调整取值逻辑对应到实际的数组字段即可。

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