从静态 JSON 文件获取数据/REACT

Question

我有一个应用此格式的静态 json 文件：

[
    {/*OBJECT1*/}, {/*OBJECT2*/} /* SO ON ... */
]

我想从这个 JSON 文件中获取数据到我的 React 组件

我使用以下代码获取 React 组件中的数据

  useEffect(() => {
    async function getEssayData() {
      const res = await fetch('/essayData.json');
      const data = await res.json();
      return data;
    }

    const fetchData = getEssayData();
    console.log('Result Data   ' + fetchData);
    console.log(fetchData);
    console.log('Data    ' + data[0]);
  }, []);

我尝试了很多事情，这只是其中之一；但是我无法访问 JSON 文件内的对象。

（获取正确进行，但我无法访问数据对象...）

控制台图像，如果您能帮助我，我真的很感激。

Answer 1

当您尝试记录“数据”时，它没有在那里定义，因为您在函数（getEssayData）中创建了它。它仅在该功能中可用。您应该使用 useState 来设置在组件中的任何位置都可用的数据。

    const [data, setData] = useState(null);

  useEffect(() => {
    async function getEssayData() {
      const res = await fetch("/essayData.json");
      const data = await res.json();
      setData(data); // Save the fetched data in the state
    }
    getEssayData();
  }, []);

  // Log the fetched data when it is available
  useEffect(() => {
    if (data) {
      console.log("Fetched Data: ", data);
      console.log("First item: ", data[0]);
    }
  }, [data]);