Arrays 从API映射函数组件中的数组

我想在选择器react native中调用并显示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

import React，{useState，useffect}来自“React”；
从“react native”导入{View，StyleSheet，Picker}；
常量应用=（）=>{
常量[selectedValue，setSelectedValue]=useState（[]）；
useffect（（）=>{
取（'https://aboutreact.herokuapp.com/demosearchables.php')
.then（response=>response.json（））
.然后（responseJson=>{
console.log（responseJson.results）
setSelectedValue（responseJson.results）
})
.catch（（错误）=>{
控制台错误（error）；
});
}, []);
报税表（
setSelectedValue（{id:itemValue}）}>
{？？？.map（（selectedValue，i）=>{
返回
})}
)
}
导出默认应用程序

使用数组存储

选择器的初始值

然后，在解析API时在该数组上设置state

使用其他状态存储选定的值

import React，{useState，useffect}来自“React”；
从“react native”导入{View，StyleSheet，Picker}；
常量应用=（）=>{
const[values，setValues]=React.useState（[]）；
常量[selectedValue，setSelectedValue]=useState（null）；
useffect（（）=>{
取（'https://aboutreact.herokuapp.com/demosearchables.php')
.then（response=>response.json（））
.然后（responseJson=>{
设置值（responseJson.results）
})
.catch（（错误）=>{
控制台错误（error）；
});
}, []);
报税表（
setSelectedValue（{id:itemValue}）}>
{values.map（（值，i）=>{
返回
})}
)
}

使用数组存储

选择器的初始值

然后，在解析API时在该数组上设置state

使用其他状态存储选定的值

import React，{useState，useffect}来自“React”；
从“react native”导入{View，StyleSheet，Picker}；
常量应用=（）=>{
const[values，setValues]=React.useState（[]）；
常量[selectedValue，setSelectedValue]=useState（null）；
useffect（（）=>{
取（'https://aboutreact.herokuapp.com/demosearchables.php')
.then（response=>response.json（））
.然后（responseJson=>{
设置值（responseJson.results）
})
.catch（（错误）=>{
控制台错误（error）；
});
}, []);
报税表（
setSelectedValue（{id:itemValue}）}>
{values.map（（值，i）=>{
返回
})}
)
}

selectedValue

是数组还是与对象？我这样问是因为

const[selectedValue，setSelectedValue]=useState（[]）

声明它是一个数组，然后此：

（itemValue）=>setSelectedValue（{id:itemValue}）

声明它是一个带有id键的对象…感谢您的关注，您的问题有助于我了解。

selectedValue

是数组还是is and对象？我这样问是因为

const[selectedValue，setSelectedValue]=useState（[]）

声明它是一个数组，然后此：

（itemValue）=>setSelectedValue（{id:itemValue}）

声明它是一个具有id键的对象…感谢您的关注，您的问题有助于我了解。。

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