Javascript 如何在React Native中将选择器数据传递到API

我构建了一个React本机组件，可以让您选择几种类型的啤酒，并使用picker将其呈现到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'
   }
});

import React，{Component}来自'React'；
从“react native”导入{View、Text、Picker、样式表、ListView}
const ds=new ListView.DataSource（{rowHasChanged:（row1，row2）=>row1！==row2}）；
导出默认类BeerPicker扩展组件{
建造师（道具）{
超级（道具）；
此.state={
啤酒：[]，
beerDataSource:ds.cloneWithRows（[]），No No No modHFGen.dll，
数据源：ds.cloneWithRows（['string1'，'string2'，'string3']），//似乎不需要它。。。
项目：[
{标签：'选择啤酒'，值：'无'}，
{标签：'IPA'，值：'IPA'}，
{标签：'Pilsner'，值：'Pilsner'}，
{标签：'Stout'，值：'Stout'}
],
选择编辑项：“无”
};
this.addBeer=this.addBeer.bind（this）；
}
addBeer（itemValue，itemIndex）{
让newBeerArray=[…this.state.beer，itemValue]；
这是我的国家({
啤酒：纽贝克，
选择EdItem:itemValue，
beerDataSource:ds.cloneWithRows（newBeerArray），
});
}
renderRow（数据）{
返回(
{`\u2022${data}`}
);
}
render（）{
让items=this.state.items.map（（项目，索引）=>{
返回（）；
});
返回(
{items}
)
}
}
const styles=StyleSheet.create({
正文：{
尺寸：30，
对齐自我：“中心”，
颜色：“黑色”
}
});

---

我想使用每个选中的项目，并通过API循环数次，以获取每个选中项目的信息

你可以用几种方法来做。如果您希望在用户选择新啤酒时进行api调用，则以下代码可能会有所帮助：

将apiData:{}添加到初始状态

添加

this.fetchBeerFromApi（itemValue）

// 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});
}