警告:无法在现有状态过渡期间(例如在“渲染”中进行更新).渲染方法应该是道具和状态的纯粹功能

Question

当我单击"触摸可量"按钮以导航到同一选项卡中的另一个屏幕时，我收到了此警告，我无法导航。当我运行时，我会在屏幕上看到导航页面，但按下标签将我重定向到同一选项卡，并且这些按钮不起作用

我制作了堆栈导航器和标签导航器，并将其合并。但是使用this.props.navigation.navigate("checkout")不起作用

<View style={{ flexDirection:'column', alignItems:'center' }}>
   <TouchableOpacity 
      activeOpacity = { .5 } 
      onPress{ this.props.navigation.navigate('CatWise') }
   >
      <Image style={{ height:35,width:35,resizeMode:"cover" }} source={ require('../assets/cat_image.png') }/>
      <Text>Electronics</Text>
   </TouchableOpacity>
</View>

我希望我单击该TouchableOpacity后，它应该将我重定向到Catwise屏幕。

警告：

Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

Answer 1

将您的OnPress函数更改为：

<TouchableOpacity 
    activeOpacity = { .5 } 
    onPress{() => this.props.navigation.navigate('CatWise') }
>

当您通过函数时，它将在渲染过程中直接执行，这意味着函数执行的结果将传递给OnPress处理程序，而不是函数本身