Вызов функции setState в React Native работает только в функции стрелки?

Question

Мне нужна ваша помощь, чтобы объяснить этот собственный код реакции.

Ниже кода, когда функция updateState написана с использованием функции стрелки, код работает отлично

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class Home extends Component {
   state = {
      myState: 'aaaaa'
   }
   updateState = () => {
      this.setState({ myState: 'The state is updated' })
    }
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               UPDATE:{this.state.myState}
            </Text>            
         </View>
      );
   }
}

но когда я меняю функция updateState, использующая обычную функцию (не функцию стрелки), как приведенный ниже код, мое состояние не изменяется при нажатии текста.

    import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class Home extends Component {
   state = {
      myState: 'aaaaa'
   }
   updateState (){
      this.setState({ myState: 'The state is updated' })
    }
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               UPDATE:{this.state.myState}
            </Text>            
         </View>
      );
   }
}

Мой вопрос: должен ли вызов функции setState использовать функцию стрелки?

Благодарим за помощь в этом вопросе.

Спасибо

Answer 1

Если вы хотите использовать без стрелки, следует добавить bind в constructor()

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      myState: 'aaaaa'
    }
    this.updateState = this.updateState.bind(this);
  }

  updateState(){
    this.setState({ myState: 'The state is updated' })
  }
  render() {
    return (
      <View>
         <Text onPress = {this.updateState}>
            UPDATE:{this.state.myState}
         </Text>            
      </View>
   );
  }
}

Answer 2

Если вы хотите использовать function, вам нужно привязать this в конструкторе, чтобы функция updateState ссылалась на класс при обращении к this. Попробуйте следующее:

constructor() {
  this.updateState = this.updateState.bind(this);
}

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

Answer 3

При каждом рендеринге создается ссылка на функцию.

Итак, чтобы этого избежать, используется функция стрелки ИЛИ привязки.

Я вызываю такую ​​функцию:

functionA = () => {}

TouchableOpacity onPress = {() => this.functionA ()}