React native 未按下按钮即调用按钮操作

我有一个带有按钮的呈现函数，可以重定向到另一个页面。 当我进入页面时，它会立即触发页面（不点击按钮），并显示以下警告消息：无法在现有状态转换期间更新

render () {
    return (
      <View>
        <Text > {this.state.text} </Text>
        <Button onPress={this.props.navigation.navigate('Home')}
                title = "Go Home" />
      </View>
    );
 }

render（）{
返回(
{this.state.text}
);
}

我用下面的代码解决了这个问题,但我不明白为什么前面的代码不起作用

render () {
    return (
      <View>
        <Text > {this.state.text} </Text>
        <Button onPress={() => this.props.navigation.navigate('Home')}
                title = "Go Home" />
      </View>
    );
 }

render（）{
返回(
{this.state.text}
this.props.navigation.navigate（'Home'）}
title=“回家”/>
);
}

你能解释一下为什么行为不同吗？

当你这样做时：

this.props.navigation.navigate('Home')

您正在调用navigate函数并将其输出传递给onPress

当您这样做时：

() => {
   this.props.navigation.navigate('Home')
}

您正在传递一个箭头函数（不是调用），此函数包含对导航的调用，但在按下按钮之前不会调用箭头函数

使用箭头函数的解决方案是正确的，因为必须传递参数，如果不必传递，可以执行以下操作：

<Button onPress={this.someOfMyFunctions.bind(this)}
                title = "Go Home" />

---

这将导致在单击按钮时调用someOfMyFunction。

之所以会发生这种情况，是因为您在第一种情况下实际上正在调用该函数

在第二个代码块中，您将函数传递给

onClick

处理程序，这正是您想要做的。值应该是函数，而不是对函数的调用

希望有帮助