React Native 先前的数据显示即使在使用中清理效果

dgsult0t  于 2023-01-31  发布在  React
关注(0)|答案(2)|浏览(104)

我在react原生应用中有一个组件,它加载与特定个人相关的会话,在该组件的useEffect()中,我既在组件成为焦点时加载会话,又在清理时卸载这些会话。

export const ClientScreen = (props) => {
  const isFocused = useIsFocused();
  const client = useSelector((state) => selectActiveClient(state));
  useEffect(() => {
    if (isFocused) {
      const loadSessions = async () => {
        if (client?.id) {
          dispatch(await loadClientSessions(client?.id));
        }
        return () => dispatch(unloadSessions()); // Cleaning up here...
      };
      loadSessions(props);
    }
  }, [isFocused, client?.id]);

  const updatedProps = {
    ...props,
    client,
  };

  return <ClientBottomTabNavigator {...updatedProps} />;
};

一般来说,组件按预期工作,但是我注意到,如果我用一个客户机加载组件,然后导航离开,然后通过加载新客户机返回组件,那么在很短的时间内,与前一个客户机相关的会话会在被替换为与新客户机相关的会话之前显示。
我的问题是,在cleanup时运行的unloadVisits()--它将会话设置为空数组--不应该阻止这种情况吗?或者这是某种保持组件先前状态的react行为吗?我如何确保这种行为不会发生?

nlejzf6q

nlejzf6q1#

Cleanup function应出现在useEffect挂钩的右大括号之前

useEffect(() => {
  if (isFocused) {
    const loadSessions = async () => {
      if (client?.id) {
        dispatch(await loadClientSessions(client?.id));
      }
    };
    loadSessions(props);
  }

  return () => dispatch(unloadSessions()); // Cleaning up here... // <--- here
}, [isFocused, client?.id]);
hi3rlvi2

hi3rlvi22#

如前所述,你的loadSessions返回了一个cleanup函数,但是你并没有对它做任何事情。而且你调用loadSessions(props)的效果并没有返回任何东西,这就是为什么它没有进行cleanup。

    • 编辑:**

我犯了一个错误,loadSessions返回了一个清理函数的Promise。而且不可能"解开"这个Promise,并以一种你可以在你的效果中返回它的方式得到清理函数本身。你必须把cleaup函数移出async function loadSessions
但并不是所有的事情都需要async/await

useEffect(() => {
  if (isFocused && client?.id) {
    loadClientSessions(client.id).then(dispatch);

    return () => dispatch(unloadSessions());
  }
}, [isFocused, client?.id]);

相关问题