React中useEffect获取本地JSON后状态无法正常使用问题求助

核心问题 #

你获取到的JSON数据是对象格式（{1: {...}, 2: {...}}），但代码里按数组逻辑处理，导致无法渲染：

• 初始状态useState([])设为数组，但实际拿到的是对象
• 渲染时判断data.length > 0，但对象没有length属性，条件不成立，map不会执行
• map方法仅支持遍历数组，无法直接遍历对象

解决方案 #

两种方式任选其一即可：

方式1：修改JSON文件为数组格式

把data.json改成标准数组结构：

[
  {"text": "first item", "done": true},
  {"text": "second item", "done": false}
]

修改后原代码的setData(myJson)可直接使用，渲染逻辑无需改动。

方式2：在代码中将对象转为数组

如果不想修改JSON文件，在获取数据后用Object.values()提取对象的值转为数组：

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [data, setData] = useState([]);

  const getData = () => {
    fetch("data.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then(response => response.json())
      .then(myJson => {
        // 将对象值转为数组
        const dataArray = Object.values(myJson);
        setData(dataArray);
      });
  };

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

  // 查看更新后的状态
  useEffect(() => {
    console.log("updated data", data);
  }, [data]);

  return (
    <div>
      {data.length > 0 && data.map((item, index) => <p key={index}>{item.text}</p>)}
    </div>
  );
}

export default App;

关于异步日志的说明 #

你看到data is []是因为setData是异步操作，useEffect里调用getData后立刻打印data时，状态还未更新。如果要查看更新后的状态，需添加依赖data的useEffect，如上代码所示。

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