从 API 映射功能组件中的数组答案

【问题标题】：Map an array in functional component from API从 API 映射功能组件中的数组
【发布时间】：2020-11-13 14:08:54
【问题描述】：

我想在选择器中调用并显示 API 反应原生。我不明白如何在地图部分的功能组件中执行此操作，以便获得价值

import React, {useState,useEffect} from 'react';
import {View, StyleSheet, Picker} from 'react-native';

const App = () => {

    const [selectedValue, setSelectedValue] = useState([]);

    useEffect(() => {
        fetch('https://aboutreact.herokuapp.com/demosearchables.php')
        .then(response => response.json())
        .then(responseJson => {
            console.log(responseJson.results)
            setSelectedValue(responseJson.results)
        })
        .catch((error) => {
            console.error(error);
          });
      }, []);

    return (        
        <View style={{flex: 1,backgroundColor:'white'}}>
                <Picker
                    selectedValue={selectedValue.id}
                    style={{ width: '100%' }}
                    onValueChange={(itemValue) => setSelectedValue({ id: itemValue })}>
                    { ???.map((selectedValue, i) => {
                        return <Picker.Item key={i} value={selectedValue.id} label={selectedValue.name} />
                    })}
                </Picker>
               </View> 
        
    )
}

export default App

【问题讨论】：

selectedValue 是数组还是对象？我问是因为const [selectedValue, setSelectedValue] = useState([]); 声明它是一个数组，然后这个：(itemValue) => setSelectedValue({ id: itemValue }) 声明它是一个带有 id 键的对象...
感谢您的关注，您的问题对我的知识有所帮助..

标签： arrays react-native react-native-android fetch-api picker

【解决方案1】：

使用数组存储Picker 的初始值。
然后，在解析 API 时在该数组上设置状态。
使用另一种状态来存储选定的值。

import React, {useState,useEffect} from 'react';
import {View, StyleSheet, Picker} from 'react-native';

const App = () => {
    const [values, setValues] = React.useState([]);
    const [selectedValue, setSelectedValue] = useState(null);

    useEffect(() => {
        fetch('https://aboutreact.herokuapp.com/demosearchables.php')
        .then(response => response.json())
        .then(responseJson => {
            setValues(responseJson.results)
        })
        .catch((error) => {
            console.error(error);
          });
      }, []);

    return (        
        <View style={{flex: 1,backgroundColor:'white'}}>
                <Picker
                    selectedValue={selectedValue ? selectedValue.id : null}
                    style={{ width: '100%' }}
                    onValueChange={(itemValue) => setSelectedValue({ id: itemValue })}>
                    { values.map((value, i) => {
                        return <Picker.Item key={i} value={value.id} label={value.name} />
                    })}
                </Picker>
               </View> 
        
    )
}

【讨论】：