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

【问题标题】：react hook cant perform setstate in an unmounted component反应钩子无法在未安装的组件中执行设置状态
【发布时间】：2019-09-28 19:30:26
【问题描述】：

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

【解决方案1】：

您可以在这里做两件事。

首先是使用清理函数（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>
    )
}

查看nice article at hackernoon 以获得更详细的说明。在我看来，这种方法比取消请求更好（因为它不需要您修改请求者的代码）。

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

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

【讨论】：

【解决方案2】：

您可以编写一个名为 useIsMounted 的自定义钩子：

const useIsMounted = () => {
  const isMounted = useRef(false);
  useEffect(() => {
    isMounted.current = true;
    return () => isMounted.current = false;
  }, []);
  return isMounted;
};

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

【讨论】：