反应天然添加到一系列状态

Question

我正在尝试在我的啤酒状态中添加一系列。我想要完成的工作是基于用户选择喜欢的啤酒的选择，它将这些特定价值添加到州。

我收到的错误是"未定义不是一个函数"，指向我添加状态的功能。

import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class BeerPicker extends Component {
  constructor(props){
      super(props);
      this.state = {
          beer: []
      };
  }
  addBeer(newbeer){  <== function throws error
      this.setState((state) => {
          beer: state.addBeer.push(newbeer)
      });
  }
   render() {
      return (
         <View>
            <Picker selectedValue = {this.state.beer} onValueChange = {this.addBeer}>
               <Picker.Item label = "IPA" value = "ipa" />
               <Picker.Item label = "Pilsner" value = "pilsner" />
               <Picker.Item label = "Stout" value = "stout" />
            </Picker>
            <Text style = {styles.text}>{this.state.beer}</Text>
         </View>
      )
   }
}
export default BeerPicker;
const styles = StyleSheet.create({
   text: {
      fontSize: 30,
      alignSelf: 'center',
      color: 'red'
   }
})

相当新的反应本地人，因此任何输入都将得到很多完成！

Answer 1

对Picker的回调给您itemValue和itemIndex，您必须在啤酒阵列中将其推入并在构造函数中进行bind

constructor(props){
    super(props);
    this.state = {
        beer: []
    };
    this.addBeer = this.addBeer.bind(this);
}
addBeer(itemValue, itemIndex){ 
    this.setState((state) => {
        beer: [...state.beer, itemValue]
    });
}

Answer 2

他的问题似乎是上下文。

尝试在构造函数内使用绑定。

this.addBeer = this.addBeer.bind(this);

constructor(props){
      super(props);
      this.state = {
          beer: []
      };
      this.addBeer = this.addBeer.bind(this);
  }

Answer 3

您需要在构造函数中绑定addbeer，并将addbeer函数更改为：

  addBeer(newbeer) {
      this.setState({
          beer: [...this.state.addBeer, newbeer]
      });
  }

Answer 4

以及将this.addBeer = this.addBeer.bind(this)添加到构造函数...您也不应该习惯于在设置状态下使用诸如.push()之类的突变器。

尝试用：

替换addBeer()

addBeer(newbeer){ 
    this.setState({
        beer: [...this.state.beer, newbeer]
    });
}