Действие кнопки вызывается без нажатия

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

Это происходит потому, что вы на самом деле вызываете функцию в первом случае.

Во втором кодовом блоке вы передаете функцию обработчику onClick, что вы и хотите сделать. Значение должно быть функцией, а не вызовом функции.

Надеюсь, это поможет.

Answer 2

Когда вы делаете:

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

Вы вызываете функцию навигации и передаете ее вывод в onPress.

Когда вы делаете:

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

вы передаете функцию стрелки (не вызов), и эта функция содержит вызов вашей навигации, но функция стрелки не вызывается, пока кнопка не нажата.

Ваше решение с использованием функции со стрелкой является правильным, потому что вам нужно передать параметр, если вам не нужно было передавать его, вы можете сделать:

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

Это приведет к вызову someOfMyFunction при нажатии кнопки.