卸载后组件仍在渲染？答案

【问题标题】：Component still rendering after unmount?卸载后组件仍在渲染？
【发布时间】：2022-02-10 05:17:00
【问题描述】：

我有一个看起来像这样的组件，我在卸载时清除了状态，但这给我带来了问题。卸载组件后，状态已成功清除，但随后出现错误消息undefined is not an object (evaluating someState.first)。我不明白为什么卸载后仍然会渲染，根据我的理解，卸载组件后组件不应该再渲染？

const SomeComponent = () => {
  const [someState, setSomeState] = ({
    first: 'John',
    last: 'Doe'
  });

  useEffect(()=>{
    someFunction();
    return () => {setSomeState()}
  }, []);

  const someFunction = () => {
    setSomeState({
      first: 'John',
      last: 'Doe',
    });
  }

  return (
    <View>
      <Text>{someState.first + ' ' + someState.last}</Text>
    </View>
  )
}

【问题讨论】：

只是...不要在卸载时清除组件本地状态？我不明白你为什么要这样做。
我正在查看另一个 StackOverflow 帖子中的 this 解决方案，因为我遇到了 React useEffect causing: Can't perform a React state update on an unmounted component 错误的问题，并且清除状态确实解决了这个问题
你原来的问题是什么？如果您有一个效果，其回调发生在组件卸载后完成，这通常不是问题。
好的，谢谢，我想我可以忽略警告
你可以，是的——你也可以使用react-use's useMountedState()之类的东西来避免警告，如果它打扰你。

标签： reactjs react-native use-effect

【解决方案1】：

someState 一开始似乎是未定义的。初始化它：

  const [someState, setSomeState] = ({  first: '',
      last: '',
});

或

检查你的 JSX：

 return (
    <View>
      {someState && <Text>{someState.first + ' ' + someState.last}</Text>}
    </View>
  )

【讨论】：

对不起，谢谢，但我在初始化 someState 时仍然遇到错误（我在上面的问题中编辑了我的代码）
在 return 中设置状态是没有用的，因为组件无论如何都会被销毁。它不能用那个状态值带回来。如cmets中所述，您应该将其删除

【解决方案2】：

你在做什么来卸载组件？如果您使用堆栈导航，则在本机反应中，组件不会被卸载，直到您按下或从堆栈中删除它们。另外请确保检查您的渲染并像这样进行更改：

  return (
    <View>
      {someState && <Text>{someState.first + ' ' + someState.last}</Text>}
    </View>

【讨论】：