在 useEffect 刷新页面中反应设置状态答案

【问题标题】：React Set State within useEffect refresh page在 useEffect 刷新页面中反应设置状态
【发布时间】：2021-07-23 09:54:57
【问题描述】：

我的应用程序有一个奇怪的错误，我认为这与 asnyc 有关 - 如果我通过单击某个元素导航到新页面，我的页面数据将正确呈现。

但是，如果我刷新所述页面，我会收到未定义数据的错误 - 我认为这与反应没有足够的时间来呈现状态更改有关？

有没有办法解决这个问题 - 也许我试图在 useEffect 中错误地设置我的状态但是，我想更新“componentDidMount”？

这是我的 useEffect 代码

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

});

用法：

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

【问题讨论】：

getLibraryFromId 是一个承诺吗？还是返回结果的方法？
另外 - 你的 useEffect 没有数组参数，这意味着它会在每次更改时运行。理想情况下，您希望传递一个空数组以暗示它只会在第一次 load.useEffect(() => { setCurrentData(getLibraryFromId(currentID, data)); }, []);

标签： reactjs react-hooks use-effect

【解决方案1】：

您正在从 API 获取数据，因此在此之前您需要添加检查对象是否为空白，如果空白则不渲染或显示占位符图像。

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

【讨论】：

是的，这样做是有道理的！谢谢大佬！