useEffect - 无法对未安装的组件执行 React 状态更新答案

【问题标题】：useEffect - Can't perform a React state update on an unmounted componentuseEffect - 无法对未安装的组件执行 React 状态更新
【发布时间】：2019-12-29 23:03:56
【问题描述】：

我正在创建一个列出几个空缺职位的网站。

一旦组件安装，我想GET 所有工作职位。因此，我使用了useEffect。我在useEffect 中设置状态，我认为这是导致错误的原因：

警告：无法对未安装的组件执行 React 状态更新。

我想知道如何解决此警告。我不明白为什么我不能在useEffect中设置状态@

我的组件

function MyComponent({changeType}) {
    const [user, setUser] = React.useState([]);
    const [positions, setPositions] = React.useState([]);

    async function getAllPositions(){
        let response = await axios("http://www.localhost:3000/api/v1/positions");
        setPositions(response.data)
    }


    useEffect( ()=> {
        let jwt = window.localStorage.getItem('jwt')
        let result = jwtDecode(jwt)
        setUser(result)
        changeType() # It is a function passing props to the parent of "MyComponent"
        getAllPositions()
        }, [],
    )
    return(
        <div>
         Something
        </div>
    )
}

【问题讨论】：

MyComponent 是否有可能在 Axios 调用返回之前被其父组件卸载？
我添加了函数changeType，用于将props传递给MyComponent的父母。您认为这可能是问题所在吗？

标签： reactjs react-hooks

【解决方案1】：

您应该在异步调用后更新状态之前检查组件是否仍然挂载

useEffect( ()=> {
       let unmounted = false
       async function getAllPositions(){
            let response = await  axios("http://www.localhost:3000/api/v1/positions");
            if(!unmounted)
                setPositions(response.data)
        }
        let jwt = window.localStorage.getItem('jwt')
        let result = jwtDecode(jwt)
        setUser(result)
        getAllPositions()
        return () => {
             unmounted = true
        }
}, [])

【讨论】：

你的意思是我在组件完全挂载之前返回我的async call？
不，当组件卸载时，您的异步调用可能会返回。像这样：挂载->异步调用->卸载->异步调用返回->状态更新
谢谢。所以正确的应该是：挂载-->异步调用-->检查组件是否挂载-->如果是-->异步调用返回-->状态更新？

【解决方案2】：

@Alexander Vidaurre Arroyo 的回答是正确的。您基本上需要确保在卸载组件时不会更新状态。

我尝试本着钩子的精神稍微重写他的答案，看看如何提取一些检查组件是否已安装以确定是否应该更新状态的方法。

import React, { useCallback, useRef, useState } from 'react';

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

const useAsyncState = (defaultValue) => {
  const isMounted = useIsMounted();
  const [value, setRawValue] = useState(defaultValue);
  const setValue = useCallback((newValue) => {
    if (isMounted()) {
      setRawValue(newValue);
    }
  }, []);
  return [value, setValue];
};

const getAllPositions = async () => {
  const response = await axios("http://www.localhost:3000/api/v1/positions");
  return response.data;
};

function MyComponent() {
  const [user, setUser] = useAsyncState([]);
  const [positions, setPositions] = useAsyncState([]);

  useEffect(async () => {
    const jwt = window.localStorage.getItem('jwt');
    const result = jwtDecode(jwt);
    setUser(result);
    setPositions(await getAllPositions());
  }, [setPositions, setUser]);

  return(
    <div>
      Something
    </div>
  );
}

【讨论】：