React中fetch获取数据存入state后无法显示问题求助

你的推测完全正确——组件第一次渲染时，dataStore还是初始的空数组[]，此时dataStore[0]是undefined，直接访问.name就会抛出"Cannot read properties of undefined"的错误。下面给你几种简单易懂的解决方法：

方法1：条件渲染 #

通过判断dataStore是否有数据，再决定是否渲染内容：

return (
  <div>
    {/* 只有当数组长度大于0时，才渲染名称 */}
    {dataStore.length > 0 && <div>{dataStore[0].name}</div>}
  </div>
);

方法2：可选链操作符（简洁写法） #

用?.语法避免访问undefined的属性，还可以搭配默认提示：

return (
  <div>
    {/* 如果dataStore[0]不存在，就显示"加载中..." */}
    <div>{dataStore[0]?.name || '加载中...'}</div>
  </div>
);

方法3：添加加载状态（更清晰的用户体验） #

新增一个isLoading状态，明确区分加载中、加载完成的状态：

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

function App() {
  let [dataStore, setDataStore] = useState([]);
  let [isLoading, setIsLoading] = useState(true); // 初始为加载中

  useEffect(() => {
    fetch(
      "https://raw.githubusercontent.com/Biuni/PokemonGo-Pokedex/master/pokedex.json"
    )
      .then((response) => response.json())
      .then((result) => {
        const { pokemon } = result;
        setDataStore(pokemon);
        setIsLoading(false); // 数据加载完成，关闭加载状态
      })
      .catch((error) => {
        console.log(error);
        setIsLoading(false); // 出错也关闭加载状态，避免一直显示加载
      });
  }, []);

  // 加载中时显示提示
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 加载完成后渲染数据
  return (
    <div>
      <div>{dataStore[0].name}</div>
    </div>
  );
}

export default App;

核心逻辑记住：React组件会先基于初始state渲染页面，异步请求（比如fetch）是在组件挂载后才执行的，所以必须处理数据未就绪时的渲染逻辑，不能直接访问可能不存在的属性。

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