Reactネイティブを状態の配列に追加する

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機能はこれに変更する必要があります：あなたも...あなたのコンストラクタにthis.addBeer = this.addBeer.bind(this)を追加するとともに

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

Answer 4

べきではありませんセット状態の.push()のようなミューテータを使用することを習慣にしてください。

でaddBeer()を交換してみてください：

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