React从静态JSON文件取数据无法访问对象的问题求助

你的代码存在三个核心问题，导致无法正确获取并访问JSON数据：

1. async函数返回Promise而非直接数据：getEssayData()是异步函数，调用后会返回一个Promise对象，而非你期望的JSON数据，所以直接console.log(fetchData)会输出Promise状态，不是实际内容。
2. 变量作用域错误：最后一行console.log('Data ' + data[0])中的data是getEssayData函数内部的局部变量，外部根本无法访问，会直接抛出data is not defined的错误。
3. 未等待异步操作完成：没有正确处理Promise的resolve结果，导致数据还没返回就尝试访问。

修正后的代码示例 #

方式1：使用async/await（推荐） #

把异步逻辑封装在内部函数中，调用时处理异常：

import { useEffect } from 'react';

// 你的组件
function YourComponent() {
  useEffect(() => {
    async function getEssayData() {
      try {
        const res = await fetch('/essayData.json');
        // 检查请求是否成功
        if (!res.ok) throw new Error(`请求失败: ${res.status}`);
        const data = await res.json();
        // 现在可以正常访问数据了
        console.log('Result Data:', data);
        console.log('第一个对象:', data[0]);
        // 如果需要在组件中渲染数据，把data存入state（比如用useState）
      } catch (err) {
        console.error('获取数据出错:', err);
      }
    }

    // 调用异步函数
    getEssayData();
  }, []);

  return <div>你的组件内容</div>;
}

方式2：使用.then()链式调用 #

如果习惯Promise链式写法，可以这样写：

useEffect(() => {
  fetch('/essayData.json')
    .then(res => {
      if (!res.ok) throw new Error(`请求失败: ${res.status}`);
      return res.json();
    })
    .then(data => {
      console.log('Result Data:', data);
      console.log('第一个对象:', data[0]);
    })
    .catch(err => console.error('获取数据出错:', err));
}, []);

额外注意事项 #

• 静态文件路径：确保essayData.json放在项目的public目录下（Create React App项目结构），这样/essayData.json的路径才能被正确解析。如果放在src目录下，也可以直接用import导入：import essayData from './essayData.json'，这种方式不需要fetch，直接就能使用数据。
• 数据持久化：如果需要在组件中渲染数据，必须用useState存储数据，示例如下：

import { useState, useEffect } from 'react';

function EssayList() {
  const [essays, setEssays] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch('/essayData.json');
        if (!res.ok) throw new Error(`请求失败: ${res.status}`);
        const data = await res.json();
        setEssays(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  // 处理加载、错误、渲染状态
  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了: {error}</div>;

  return (
    <ul>
      {essays.map((essay, index) => (
        <li key={index}>{/* 渲染每个essay的属性，比如essay.title */}</li>
      ))}
    </ul>
  );
}

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