使用React原生Picker显示获取的数组

Question

我正在使用 fetch 来获取数组数据，然后将它们推入一个数组中，这样我就可以将它们显示为我的反应本机选择器项目，这是我的代码：

state = {
    selectedValue: '',
    data : []
   
  };
 componentDidMount() {
    
    return fetch('****url')
        .then((response) => response.json())
        .then((res) => {
            let da = [];
            var count = Object.keys(res.proches).length;
            for(var i=0;i<count;i++){
              da.push(res.proches[i][0].nom ); 
            }
            
            
            this.setState({
              data:da
            })
            
            
        })
        .done();
  }
 render() {
    console.log("!!!!!!!!!")
    console.log(this.state.data);
    return (
        <Picker
           selectedValue={this.state.selectedValue}
           onValueChange={() =>{}} >
           { this.state.data.map((item, index)=>
             <Picker.Item label={item} value={index} key={index}/>
           )}
         </Picker>

这就是 console.log(this.state.data) 显示的内容：

但是我的选择器没有显示任何内容，也没有打开，我做错了什么？ 谢谢你的回复

Answer 1

我认为这是一个造型问题。 尝试给他风格：

<Picker 
    selectedValue={this.state.selectedValue}
    style={{ height: 50, width: 100 }}
    onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
    { 
        this.state.data.map((item, index) => <Picker.Item label={item} value={index} key={index} />)
    }
</Picker>

Answer 2

尝试这个轻量级且完全可定制的包rn-multipicker

完整文章：https://dev.to/rahul04/add-multi-select-dropdown-to-react-native-applications-53ef

import { RNMultiSelect } from 'rn-multipicker';

const COUNTRIES = [
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua and Barbuda",
"Argentina",
];

const App() {
  const [selectedItems, setSelectedItems] = useState<string[]>([]);

  return (
    <View style={{flex: 1}}>
       <RNMultiSelect placeholder="Countries" data={COUNTRIES} onSelectedItemsChange={(value) => setSelectedItems(value)} selectedItems={selectedItems} />
    </View>
  );
} 

Linkedin 帖子