React Native中@react-native-community/picker仅显示数组最后一项求助

你的问题出在venues数组的定义上——你把所有场馆的name和id都塞进了同一个对象里，而JavaScript对象中重复的键会被后面的内容覆盖，最终这个对象只剩下最后一组name: "Cheescake Factory", id: 4，所以map遍历的时候只生成了一个Picker.Item，自然只显示最后一项。

修正后的代码 #

import React, { Component } from "react";
import { Dimensions, View } from "react-native";
import {Picker} from '@react-native-community/picker';

const deviceWidth = Dimensions.get("window").width;

export default class Results extends Component {
constructor(props) {
  super(props);

  this.state = {
    // 修正：每个场馆是独立的对象，存放在数组中
    venues: [
      {"name": "Carmine's", "id": 0},
      {"name": "Carmines", "id": 1},
      {"name": "Joe's", "id": 2},
      {"name": "Johnny V's", "id": 3},
      {"name": "Cheescake Factory", "id": 4}
    ],
    selectedItem:''
  };
}

  render() {
   return (
      <View style={{flex:1}}>
       <Picker
       selectedValue={this.state.selectedItem}
       style={{width: deviceWidth, height: 40 }}
       onValueChange={(itemValue, itemIndex) => this.setState({selectedItem: itemValue})}>
       { this.state.venues.map( (v, key)=>{
         return <Picker.Item label={v.name} value={v.id} key={key} />
       }) }
       </Picker>
      </View>
   );
  }
}

补充说明 #

• JavaScript对象不允许重复键名，后声明的同名键会直接覆盖前面的内容，这是语言基础规则
• 必须确保数组中的每一项都是独立的对象，这样map方法才能遍历生成所有场馆选项

内容的提问来源于stack exchange，提问作者Pangit