React页面重载后无法获取数据问题求助

你的问题核心是初始状态类型不匹配，加上页面刷新时API请求未完成前的渲染逻辑问题，具体原因和解决方法如下：

• 初始状态错误：你应该是把data的初始值设成了{}（空对象），而map是数组的专属方法。热更新时组件没有完全卸载，data可能还保留着之前请求到的数组状态；但页面刷新后，组件重新初始化，data变回空对象，此时直接调用map就会触发TypeError。
  解决：把data的初始状态改成空数组[]：

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

• 渲染时的安全判断：即使初始状态设为数组，也建议在渲染时加一层判断，避免API返回意外结构导致的报错：

  // 渲染部分示例
  {data.length > 0 ? (
    data.map(item => <div key={item.id}>{item.name}</div>)
  ) : (
    <div>加载中...</div>
  )}
  // 或者更严谨的类型校验
  {Array.isArray(data) && data.map(item => <div key={item.id}>{item.name}</div>)}
  

• 代码语法修正：你的fetch调用里URL没有加引号，这是语法错误，虽然热更新可能没触发报错，但正式运行会出问题，记得补上：

  useEffect(() => {
    fetch('http://192.168.68.105:8084/api/courses') // 补充单/双引号
      .then((res) => res.json())
      .then((data) => setData(data.data.courseData));
  }, []);
  

你提到另一个组件流程正常，可以对比两个组件的data初始状态，大概率是另一个组件的初始值设的是空数组。

内容的提问来源于stack exchange，提问作者Manas S. Roy