Question

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

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

我用以下代码解决了这个问题，但是我不明白为什么以前的代码不起作用。

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

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

Answer 1

操作时：

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

您正在调用导航功能，并将其输出传递给onPress。

当您这样做：

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

您正在传递箭头功能（而不是调用），并且此功能包含对导航的调用，但是直到按下按钮时，才会调用箭头功能。

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

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

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

Answer 2

发生这种情况是因为您实际上是在第一种情况下调用该函数。

在第二个代码块中，您正在将函数传递给onClick处理程序，这是您要执行的操作。该值应该是一个函数，而不是对函数的调用。

希望有帮助。

无需按下即可调用按钮动作

2 个答案: