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

概述我构建了一个ReactNative组件,可让您选择几种类型的啤酒,它将通过选择器呈现到列表视图中.我无法解决的问题是将数据发送到BreweryDbApi.我不确定从这个半完成的组件开始.importReact,{Component}from'react';import{View,Text,Picker,StyleSheet,ListView}fro

我构建了一个React Native组件,可让您选择几种类型的啤酒,它将通过选择器呈现到列表视图中.

我无法解决的问题是将数据发送到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以获取有关每个选定项目的信息.

解决方法:

您可以通过几种方法来做到这一点.如果您要在用户选择新啤酒时进行API调用,则以下代码可能会有所帮助：

将APIData：{}添加到初始状态

添加this.fetchBeerFromAPI(itemValue);在addBeer函数中

// notice I used es7 fat arrow functions to avoID having to bind in constructorfetchBeerFromAPI = 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});}

总结

以上是内存溢出为你收集整理的javascript-如何在React Native中将选择器数据传递到API全部内容，希望文章能够帮你解决javascript-如何在React Native中将选择器数据传递到API所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。