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

【问题标题】：React Native: Can't perform a React state update on an unmounted componentReact Native：无法对未安装的组件执行 React 状态更新
【发布时间】：2020-09-03 07:53:54
【问题描述】：

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

这是我的 useEffect 方法。

  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,
      };

谢谢。

【问题讨论】：

我在useeffect方法中已经做到了。
不，有两种不同的方法。
在功能组件中有没有办法做到这一点？
使用componentDidMount 和componentWillUnmonut。前者使条件为真，后者使条件为假。

标签： javascript reactjs react-native

【解决方案1】：

如果组件已卸载（在您的情况下是 dispatch 调用），您想要做的是阻止所有状态更新。通过分配mounted = false;，您没有取得任何成果，因为您的请求已经在进行中。在清理函数中，您需要取消该请求以防止在调用 dispatch 时执行其成功/错误回调，而不是分配 false。

我对@987654324@ 不是很熟悉，但是根据它的文档，您可以创建一个取消令牌并将其传递给您的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])

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,
      });
    });
}

【讨论】：