React Native Tooltip - 无法对卸载的组件执行 React 状态更新

时间:2021-02-11 11:12:14

标签: reactjs react-native

在我的 react-native 项目中,我使用了以下工具提示库。

https://github.com/jasongaare/react-native-walkthrough-tooltip

我使用的工具提示如下:

            <Tooltip
              isVisible={showGuide}
              content={renderTT()}
              placement="center"
              onClose={() => console.log('closed')}
            ><View><Text>Here</Text></View>
            </Tooltip>

renderTT() 函数返回工具提示的视图,并将 showGuide 的状态设置为 false - setShowGuide(false)。

renderTT() 看起来像这样:

  const renderTT = props => {
    setShowGuide(false)
    return (
      <View style={{padding:10}}>
        <Text>This is tooltip</Text>
      </View>
    )
  }

当我导航到另一个屏幕或上一个屏幕时会出现问题。它显示如下警告,指向我屏幕中的这一行:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

您能否帮助说明为什么会发生这种情况以及我该如何解决?

谢谢!

1 个答案:

答案 0 :(得分:1)

https://github.com/jasongaare/react-native-walkthrough-tooltip/issues/113

https://github.com/jasongaare/react-native-walkthrough-tooltip/issues/93

您的问题似乎来自工具提示类中的 setTimeout。

https://github.com/jasongaare/react-native-walkthrough-tooltip/pull/105

它看起来也正在得到解决,并可能为此合并一个解决方案。您可以通过将该代码添加到本地项目并查看错误是否消失来检查是否是您的错误。不过好像很快就会修好了!