为什么 JavaScript 从 useEffect() 钩子中渲染数据，但将数据放入函数体中却渲染失败？

Question

我有一个名为 teams.json 的 JSON 文件，其中包含基本结构（“姓名”、“年龄”、“国家”、“角色”、“团队”和“形象” ) 在一个对象中。我正在使用 React 来使用函数 fetch() 从 local JSON 文件中检索数据。当我调用 useEffect（如下所示）挂钩时，数据从本地 JSON 文件中检索，我可以调用 useState 函数将数据存储在名为 [=19= 的状态变量中].

useEffect()函数调用

//file path
filePath = "/src/public/teams.json"
const getData = (file) => {
   fetch(file)
   .then(res => res.json())
   .then(data => setData(data))
   .catch(err => console.log("Error fetching data", err)
}
  
useEffect(() => {
   getData(filePath)
}, [filePath])

如果我尝试在 useEffect() 挂钩中编辑或访问数据，则可以毫无问题地检索数据。

.then(data => console.log(data[0]))

这个returns一个包含必要信息的json对象。

{
  "name":"R",
  "image":"https://example.com",
  "team":"B",
  "role":"WB",
  "country":"American",
  "age":18
}

但是，在我的 React App 主体中，如果我尝试从数据状态获取数据，它会给我一个错误 Cannot read properties of undefined，如下所示。

React 应用程序主体

return (
   <main>
      {data[0].country}
    </main>
  )

但是我得到这个错误：

我尝试过来自以下论坛的解决方案：

Stack Overflow Discussion Axios

Stack Overflow Discussion Error Axios

我已将我的项目移动到结构中：

-src
--public
*some files*

并将JSON文件放入public文件夹。它现在读取它但仍然不呈现。我也尝试过使用 axios 但无济于事。

如果这是一个简单的修复，对此表示抱歉！感谢您的帮助！

Answer 1

因为数据还没有加载。

假设您的应用类似于

function App() {
  const [data, setData] = React.useState();
  const getData = (file) => {
    fetch(file)
      .then((res) => res.json())
      .then((data) => setData(data))
      .catch((err) => console.log("Error fetching data", err));
  };

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

  return <main>{data[0].country}</main>;
}

您从 undefined 数据开始。

增加防范措施：

if(!data) return <>Loading...</>;
return <main>{data[0].country}</main>;

为什么 JavaScript 从 useEffect() 钩子中渲染数据，但将数据放入函数体中却渲染失败？

Why does JavaScript render data from the useEffect() hook but fails to render the data when put in the function body?

javascript

fetch

reactjs