React JS中如何正确处理API返回的对象数组以正常操作

首先明确：你的数据已经是可正常操作的对象数组，出现[object Object]是两个原因导致的视觉误解，并非数据格式错误。

1. 为什么会看到[object Object]？ #

原因一：useState的异步更新特性 #

你在setCertificateTypes之后立刻打印certificateTypes：

setCertificateTypes(response.certificateTypes);
console.log('in fetch ' + certificateTypes);

React的useState更新是异步的，这行打印的是更新前的旧数组；同时用+拼接字符串时，数组会自动调用toString()方法，每个对象被转为[object Object]，所以你看到了一串这样的结果。

原因二：错误的打印方式 #

如果直接写console.log(certificateTypes)却仍显示该结果，大概率是你不小心用了字符串拼接（比如console.log('数据：' + certificateTypes)），而非直接打印数组本身。

2. 验证数据状态的正确方式 #

• 直接打印数组：不要做字符串拼接，直接执行：

  console.log(certificateTypes);
  

  浏览器控制台会展开数组，显示每个对象的详细结构。
• 用useEffect监听状态更新：由于useState的异步特性，要查看更新后的状态，可借助useEffect：

  useEffect(() => {
    console.log('更新后的certificateTypes:', certificateTypes);
  }, [certificateTypes]); // 依赖certificateTypes，状态更新时自动触发
  

3. 正常操作对象数组的示例 #

既然数据已经是标准的对象数组，你可以直接使用数组方法进行操作：

• 遍历渲染组件：

  return (
    <div className="certificate-list">
      {certificateTypes.map(type => (
        <div key={type.id} className="certificate-item">
          <h4>{type.name}</h4>
          <p>创建时间：{type.created_at}</p>
        </div>
      ))}
    </div>
  );
  

• 筛选或查找特定项：

  // 查找名称为Gasmeting的类型
  const targetType = certificateTypes.find(type => type.name === 'Gasmeting');
  // 筛选2023年4月之后创建的类型
  const recentTypes = certificateTypes.filter(type => new Date(type.created_at) > new Date('2023-04-01'));
  

总结 #

不需要执行JSON.parse，因为你的API返回数据已经被getCertificateTypes()处理成了JavaScript对象（通常这类封装函数内部已经调用过response.json()）。你遇到的只是控制台显示的问题，数据本身完全可以正常操作。

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