Изменить состояние / опору в компоненте видео-натив-видео

Question

Я новичок в реагировании и немного экспериментирую с реагировать-нативно-видео .Я пытаюсь изменить реквизит в библиотеке реагировать на видео, нажав на сенсорный элемент.Но я получаю сообщение об ошибке:

undefined не является объектом (оценка 'this.state.setState')

Я уверен, что это простая проблема.Я просто хочу узнать, как инициировать, вызывать и изменять состояние реквизита, когда я касаюсь определенной сенсорной области.В этом примере я хочу изменить ставку с 0,1 до 1.

Вот мой код:

type Props = {};
export default class App extends Component<Props> {
  state = {
    rate: 0.1,
  };

  _onPressButton() {
    Alert.alert('You tapped the button!')
    this.state.setState({ rate: 1 });
  }

  render() {

    return (
      <View style={styles.container}>

        <Video
          source={require('./assets/grid.mp4')}
          ref={(ref) => {
            this.player = ref
          }}                                      
          onBuffer={this.onBuffer}                
          onError={this.videoError}               
          style={styles.backgroundVideo}
          rate={this.state.rate}
        />

        <TouchableWithoutFeedback onPress={this._onPressButton}>
          <View style={styles.square1}>
            <Text style={styles.welcome}>My text</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

Answer 1

Вы не связываете свою функцию.

_onPressButton() {
    Alert.alert('You tapped the button!')
    this.state.setState({ rate: 1 });
  }

должна быть такой же стрелкой, как эта

_onPressButton = () => {
    Alert.alert('You tapped the button!')
    this.state.setState({ rate: 1 });
  }

или вам нужно сделать конструктор и написать в нем this._onPressButton.bind(this).

Answer 2

Ваш onPressButton метод не привязан к контексту, и, как уже упоминалось выше, вам нужно использовать this.setState({ rate: 1 });.

Вы можете добавить конструктор и использовать .bind(this), как показано ниже:

constructor(props) {
    super(props);

    this. _onPressButton = this. _onPressButton.bind(this)
  }

Или вы можете использовать функцию стрелки с автоматической привязкой, как показано ниже:

_onPressButton = () => {
    Alert.alert('You tapped the button!')
    this.setState({ rate: 1 });
  }

Answer 3

Как говорится в ошибке:

undefined не является объектом (оценивается this.state.setState ')

this.state не имеет объекта с именем setState

Изменение:

_onPressButton() {
    Alert.alert('You tapped the button!')
    this.state.setState({ rate: 1 });
  }

На:

_onPressButton() {
    Alert.alert('You tapped the button!')
    this.setState({ rate: 1 });
  }

Дополнительно необходимо изменить:

<TouchableWithoutFeedback onPress={this._onPressButton}>

на

<TouchableWithoutFeedback onPress={() => this._onPressButton()}>