在视频 react-native-video 组件中更改 state/prop

Question

我是新手，正在尝试 react-native-video。我试图通过单击可触摸元素来更改 react-native-video 库中的道具。但我收到错误消息：

undefined is not an object (evaluating 'this.state.setState')

我确定这是一个简单的问题。我基本上只是想了解当我触摸定义的 Touchable 区域时如何启动、调用和更改道具的状态。在此示例中，我想将速率从 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

如错误所述：

undefined is not an object (evaluating '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()}>

Answer 2

您没有绑定您的函数。

_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 3

您的 onPressButton 方法未绑定到上下文，并且如上述答案所述，您需要使用 this.setState({ rate: 1 });.

您可以添加构造函数并使用 .bind(this)，如下所示：

constructor(props) {
    super(props);

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

或者您可以使用如下所示的 auto-binding 箭头函数：

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

在视频 react-native-video 组件中更改 state/prop

Change state/prop in video react-native-video component

javascript

react-native

react-props

react-state