Javascript 反应本族语:Can';t在未安装的组件上执行React状态更新

Javascript 反应本族语:Can';t在未安装的组件上执行React状态更新,javascript,reactjs,react-native,Javascript,Reactjs,React Native,当我导航到特定组件时,我的react本机应用程序会引发此错误。我使用的是功能组件 这是我常用的方法 useEffect(() => { let mounted = true; if (mounted) { getSingleProject(route.params.itemId); console.log(singleProject && singleProject); } return () => {

当我导航到特定组件时,我的react本机应用程序会引发此错误。我使用的是功能组件

这是我常用的方法

  useEffect(() => {
    let mounted = true;
    if (mounted) {
      getSingleProject(route.params.itemId);
      console.log(singleProject && singleProject);
    }
    return () => {
      mounted = false;
      console.log("cleanup");
    };
  }, [getSingleProject, route.params.itemId])
我尝试了其他答案中的另一个解决方案,但我没有帮助

这是我的行动方法

export const getSingleProject = (id) => async (dispatch) => {
  console.log("This method us called");

  const config = {
    headers: {
      Authorization: await AsyncStorage.getItem("token"),
    },
  };
  await axios
    .get(`${API_URL}/project/single/${id}`, config)
    .then((res) => {
      console.log(res.data, "this is from actions");

      dispatch({
        type: GET_SINGLE_PROJECT,
        payload: res.data,
      });
    })
    .catch((err) => {
      dispatch({
        type: GET_SINGLE_PROJECT_ERROR,
        payload: err,
      });
    });
}
这是我的减速机。

export default function (state = initiastate, actions) {
  const { type, payload } = actions;

    case GET_SINGLE_PROJECT:
      return {
        ...state,
        singleProject: payload,
        loading: false,
      }; 

谢谢。

如果组件已卸载,您要做的是阻止所有状态更新(在您的情况下,将是
调度
调用)。通过分配
mounted=false您没有实现任何目标,因为您的请求已经在进行中。在cleanup函数中,您需要取消该请求,以防止在调用
dispatch
时执行其成功/错误回调,而不是指定false

我对
axios
不是很熟悉,但根据它的文档,您可以创建一个取消令牌并将其传递给您的
axios
呼叫,因此整个解决方案如下:

  useEffect(() => {
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    getSingleProject(route.params.itemId, source);

    return () => {
      source.cancel();
      console.log("cleanup");
    };
  }, [getSingleProject, route.params.itemId])

若要删除-无法对未安装的组件警告执行反应状态更新,请在条件下使用componentDidMount方法,并在componentWillUnmount方法上使该条件为false。我已在useeffect方法中执行了此操作。否,有两种不同的方法。在功能组件中有什么方法可以做到这一点吗?使用
componentDidMount
componentwillunmount
。前者使条件为真,后者使条件为假。
export const getSingleProject = (id, source) => async (dispatch) => {
  console.log("This method us called");

  const config = {
    headers: {
      Authorization: await AsyncStorage.getItem("token"),
    },
    cancelToken: source.token
  };
  await axios
    .get(`${API_URL}/project/single/${id}`, config)
    .then((res) => {
      console.log(res.data, "this is from actions");

      dispatch({
        type: GET_SINGLE_PROJECT,
        payload: res.data,
      });
    })
    .catch((err) => {
      dispatch({
        type: GET_SINGLE_PROJECT_ERROR,
        payload: err,
      });
    });
}