픽커 데이터를 React Native에서 API로 전달하는 방법

Question

몇 가지 유형의 맥주를 선택할 수있는 React Native Component를 제작했으며 선택기로 listview로 렌더링합니다.

문제를 파악하는 데 문제가있어 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}); 
}