时间戳

首页 > 解决方案 > 反应钩子无法在未安装的组件中执行设置状态

reactjs - 反应钩子无法在未安装的组件中执行设置状态

问题描述

const SideAd = () => {
    const [sideAd, setSideAd] = useState([])
    useEffect(() => {
            query()
    }, [])
    const query = async () => {
        const res = await getSideAd()
        Array.isArray(res) && setSideAd(res)
    }
    return (
        <div className="sideAdComponent">   
        </div>
    )
}

我只想在挂载时提出请求，然后设置一个新状态。但是我得到了错误react hook cant perform setstate in an unmounted component

标签： reactjs

解决方案

你可以在这里做两件事。

首先是useEffect使用清理函数来对抗竞争条件（useEffect回调中的返回值）

const SideAd = () => {
    const [sideAd, setSideAd] = useState([])
    useEffect(() => {
      const isMounted = true;
      getSideAd().then(res => Array.isArray && isMounted && setSideAd(res))
      return () => {isMounted = false;}
    }, [])
    return (
        <div className="sideAdComponent">   
        </div>
    )
}

查看hackernoon上的好文章以获得更详细的解释。在我看来，这种方法比取消请求更好（因为它不需要您修改请求者的代码）。

另一件事：也许最好在响应到来之前检查组件卸载的原因。这可能是有正当理由的（例如，您已经离开而响应尚未到来）。

但也有可能有一些 HOC 内联声明组件构造函数，这会导致重新创建所有子树而不是更新。因此值得花一些时间进行调查 - 因为可能存在您尚未发现的隐藏错误（示例）。

推荐阅读