React中useEffect内调用setState刷新页面后数据未定义如何解决

核心问题根因 #

你遇到的刷新报错问题和两个错误写法直接相关：

1. 你的useEffect没有添加依赖数组，完全没有实现类组件componentDidMount只在首次挂载执行一次的效果，反而会在组件每次渲染完成后反复执行。
2. React组件首次渲染的优先级高于useEffect回调的执行优先级，也就是说首次渲染的时候currentData还是初始的空/undefined值，你直接访问currentData.backdrop_path就会直接抛出 undefined 访问错误。

点击跳转页面正常是因为跳转前currentID和data已经完成了赋值，首次渲染的时候就能直接拿到对应的值，不会触发空访问报错。

修复步骤 #

• 第一步先修正useEffect的依赖配置：
  如果你确实需要模拟componentDidMount的执行时机，给useEffect添加空依赖数组即可：

  useEffect(() => {
    setCurrentData(getLibraryFromId(currentID, data));
  }, []);
  

  如果你的currentID或者data会动态变化，需要把这两个变量加入依赖数组，避免拿到的永远是初始值，同时可以加非空判断避免异步数据未返回时执行无效逻辑：

  useEffect(() => {
    if (!currentID || !data) return;
    setCurrentData(getLibraryFromId(currentID, data));
  }, [currentID, data]);
  

• 第二步给渲染逻辑加空值防护，任选一种方式即可：
  1. 定义state时给currentData设置初始默认值：const [currentData, setCurrentData] = useState({});
  2. 访问属性时用可选链：把图片地址改为https://image.tmdb.org/t/p/original/${currentData?.backdrop_path}
  3. 加条件渲染，只有拿到有效值后再渲染图片：

  {currentData?.backdrop_path && (
    <img src={`https://image.tmdb.org/t/p/original/${currentData.backdrop_path}`} alt='' />
  )}
  

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