ピッカーデータをReact NativeのAPIに渡す方法

Question

いくつかのタイプのビールを選択できるReactネイティブコンポーネントを作成し、ピッカーでリストビューにレンダリングします。

私が問題を抱えている問題は、そのデータをBreweryDb APIに送信することです。私はこの半完成のコンポーネントでどこから始めるべきかわかりません。

import React, { Component } from 'react'; 
import { View, Text, Picker, StyleSheet, ListView } from 'react-native' 

const ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}); 

export default class BeerPicker extends Component { 
    constructor(props){ 
     super(props); 

     this.state = { 
     beer: [], 
     beerDataSource: ds.cloneWithRows([]), 
     dataSource: ds.cloneWithRows(['string1', 'string2', 'string3']), //It seems to be not needed... 
     items: [ 
      {label: 'Choose Beer', value: 'none'}, 
      {label: 'IPA', value: 'ipa'}, 
      {label: 'Pilsner', value: 'pilsner'}, 
      {label: 'Stout', value: 'stout'} 
     ], 
     selectedItem: 'none' 
     }; 

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

    addBeer(itemValue, itemIndex){ 
     let newBeerArray = [...this.state.beer, itemValue]; 
     this.setState({ 
     beer: newBeerArray, 
     selectedItem: itemValue, 
     beerDataSource: ds.cloneWithRows(newBeerArray), 
     }); 
    } 

    renderRow(data) { 
     return (
     <Text>{`\u2022 ${data}`}</Text> 
    ); 
    } 

    render() { 
     let items = this.state.items.map((item, index) => { 
     return (<Picker.item label={item.label} value={item.value} key={index}/>); 
     }); 

     return (
     <View> 
      <Picker selectedValue={this.state.selectedItem} onValueChange = {this.addBeer}> 
      {items} 
      </Picker> 
      <ListView 
      dataSource={this.state.beerDataSource} 
      renderRow={this.renderRow}/> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    text: { 
     fontSize: 30, 
     alignSelf: 'center', 
     color: 'black' 
    } 
}); 

それぞれの選択されたアイテムを使用して、各ピッキングされたアイテムに関する情報を取得するためにAPIを何度もループしたいと考えています。

Answer 1

これはいくつかの方法で実行できます。ユーザーが新しいビールを選択したときにあなたは、API呼び出しを行いたい場合は、次のコードは役に立つかもしれ：

が

状態に初期addBeer機能でthis.fetchBeerFromApi(itemValue);を追加するapiData: {}を追加

// notice I used es7 fat arrow functions to avoid having to bind in constructor 
fetchBeerFromApi = async (beerId) => { 
    let response = await fetch(`${BREWERY_API_URL}/beer/${beerId}`); 
    response = await response.json(); 

    if (response.error) { 
    console.error('Error with brewery api beer request', response.error); 
    return false; 
    } 
    const apiData = this.state.apiData; 
    apiData[beerId] = response; 
    // Or handle storing apiData somewhere else... I usually use immutable data 
    // structures to avoid deeply nested data not triggering re-rendering issues 
    // so this may or may not be problematic... 
    // Here is the immutablejs alternative to those last two lines: 
    // const apiData = this.state.apiData.set(beerId, response); 

    // Here we store it back to state where you can handle rendering the data if 
    // it is available 
    this.setState({apiData}); 
}