在本机反应中创建下拉列表答案

【问题标题】：Creating Drop down list in react native在本机反应中创建下拉列表
【发布时间】：2020-06-25 13:40:33
【问题描述】：

我正在创建一个用于冠状病毒跟踪的 UI。所以我需要一个下拉列表来获取点击特定国家/地区的不同国家/地区的数据。我正在共享代码段。任何帮助都会很明显。

import React from "react";
import Axios from "axios";
import { StyleSheet, View, ImageBackground, Text, Image, Picker } from "react-native";
import { Dropdown } from "react-native-material-dropdown";

export default class App extends React.Component {

    constructor(props) {
        super(props);

        this.getCountryData = this.getCountryData.bind(this);
    }
    state = {
        confirmed: 0,
        recovered: 0,
        deaths: 0,
        countries: []
    }

    componentDidMount() {
        this.getData();
    }

    async getData() {
        const resApi = await Axios.get("https://covid19.mathdro.id/api");
        const resCountries = await Axios.get("https://covid19.mathdro.id/api/countries");
        const countries = [];
            for (var i=0; i < resCountries.data.countries.length; i++) {
                countries.push(resCountries.data.countries[i].name);
            }
        
        this.setState({
            confirmed: resApi.data.confirmed.value,
            recovered: resApi.data.recovered.value,
            deaths: resApi.data.deaths.value,
            countries
        }); 
    }

async getCountryData(event){
    try {
    const res = await Axios.get(`https://covid19.mathdro.id/api/countries/${event.target.value}`);
    this.setState({
        confirmed: res.data.confirmed.value,
        recovered: res.data.recovered.value,
        deaths: res.data.deaths.value
    })}
    catch (err) {
        if(err.response.status === 404)
        this.setState({
            confirmed: "No data available",
            recovered: "No data available",
            deaths: "No data available"
        })
    }
}
renderCountryOptions() {
        return this.state.countries.map((name, i) => {
        return <Text key={name}>{name}</Text> 
    });
}

  render() {
      return (  
      <View style={styles.container}>               
            <View style={{justifyContent: 'center',alignItems: 'center'}}>
                <View style={{height: 150, top:29,width:900, backgroundColor: 'steelblue'}} /> 
                <Text style={styles.text}>COVID-19 Cases Overview</Text>     
            </View>  
            <Image
              source={require("./assets/Covid-19.jpg")}
              resizeMode="contain"
              style={styles.image}
            >
            </Image> 
            <Text style={styles.text1}>Global Data</Text>
          
          <View style={styles.dropDown}>
            <Dropdown  onChange={this.getCountryData}>
                {this.renderCountryOptions()}
                
            </Dropdown>
          </View>            

            <View>  
                <View style={styles.boxConfirmed}>
                    <Text>Confirmed </Text>
                    <Text>{this.state.confirmed}</Text>
                </View>
            
                <View style={styles.boxRecovered}>
                    <Text>Recovered</Text>
                    <Text>{this.state.recovered}</Text>
                </View>

                <View style={styles.boxDeaths}>                 
                    <Text> Deaths</Text>
                    <Text>{this.state.deaths}</Text>
                </View>

            </View>
    
        </View> 
    );
  }
}

我无法提取个别国家的数据。请建议我如何在 React Native 中使用 Dropdown

【问题讨论】：

请求是否到达 onChange 回调？真正的问题是什么？
在 renderCountryOptions() 中我使用了标签，因为它在我使用

标签： react-native drop-down-menu picker

【解决方案1】：

您可以使用来自 React Native 社区的 react native picker 来完成任务...

<Picker
  selectedValue={this.state.language}
  style={{height: 50, width: 100}}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({language: itemValue})
  }>
  this.state.list.map((val) => {
  <Picker.Item label=val value=val />
   })

【讨论】：