Question

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

我收到的错误是'undefined不是一个函数'，它指向我添加状态的函数。

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'
   }
})

React Native相当新，所以任何输入都可以完成！

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

他的问题似乎是背景。

尝试在构造函数中使用bind。

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()这样的mutator。

尝试将addBeer()替换为：

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

React Native添加到状态数组

4 个答案: