React中useState数组调用map函数提示“不是函数”问题求助

可能原因与修复方案 #

1. 验证API返回数据的实际类型 #

虽然你提到控制台打印数据正常，但需确认response.data本身就是数组类型。可以在请求回调中添加类型校验：

const response = await getFicharpgs();
console.log('API返回数据类型:', typeof response.data);
console.log('是否为数组:', Array.isArray(response.data));

如果API返回的是包裹在对象中的数组（比如{ data: [...] }），直接存response.data会把整个对象存入状态，导致后续map调用失败。此时需要提取数组字段：

// 假设数组在response.data.list字段下
setFicharpgs(response.data.list);

2. 渲染时增加数组类型校验 #

即使初始状态是数组，异步请求返回非数组值会覆盖状态，导致渲染报错。在map前先做类型判断：

{Array.isArray(ficharpgs) ? ficharpgs.map(item => (
  <tr key={item.id}>
    {/* 表格单元格内容 */}
  </tr>
)) : <tr><td>加载中或数据格式错误</td></tr>}

3. 规范useEffect中的异步请求逻辑 #

确保异步请求的错误处理和状态更新逻辑严谨，避免非数组值流入状态：

useEffect(() => {
  const fetchFicharpgs = async () => {
    try {
      const response = await getFicharpgs();
      // 仅当返回数据为数组时更新状态
      if (Array.isArray(response.data)) {
        setFicharpgs(response.data);
      } else {
        console.error('API返回非数组数据:', response.data);
      }
    } catch (err) {
      console.error('数据请求失败:', err);
      // 错误时可重置为空数组，避免后续渲染报错
      setFicharpgs([]);
    }
  };
  fetchFicharpgs();
}, []); // 空依赖确保组件挂载时仅请求一次

4. 排查是否有其他地方修改状态 #

检查代码中所有调用setFicharpgs的位置，确保没有传入null、undefined或其他非数组值，这些都会导致map调用失败。

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