在本机反应中使用 rn 选择器选择显示空数据答案

【问题标题】：Shows empty data using rn picker select in react native在本机反应中使用 rn 选择器选择显示空数据
【发布时间】：2021-09-03 19:50:00
【问题描述】：

const [country, setCountry] = useState([]);

useEffect(() => {
DataService.get(API.API_GET_COUNTRY).then((response) => {
  console.log('Countries', country);

  // let data = response.data.items;
  //   data.map(names=>{console.log("name",names['name'])
  //   let piker=[]
  //   piker.push({label:names['name'],value:names['id']})
  //   console.log("Picker",piker);
  // })

  setCountry([response.data.items]);
});
 }, []);

function getPickerItems(array, labelKey, valueKey) {
 const pickerItems = [];
 array &&
array.map((item) =>
  pickerItems.push({ label: item[labelKey], value: item[valueKey] })
);
return pickerItems;
 }

 <RNPickerSelect items={getPickerItems(country, 'name', 'id')}/>

// 我试图在选择器中显示国家名称列表。我从 api 得到响应并在国家/地区设置。既然我得到了数据数组。但我无法在选择器中看到数据。请帮我解决这个问题。

【问题讨论】：

为什么在setCountry 调用中将response.data.items 包装在另一个数组中？否则，它应该可以工作。
对不起我的错误。我跑来跑去解决我的问题。非常感谢您的帮助。

标签： javascript react-native api axios react-native-picker-select

【解决方案1】：

按照您编写代码的方式，每次重新渲染组件时，getPickerItems 函数必须再次检查从服务器获取的国家/地区列表，以根据您的需要对其进行格式化。但实际上你不需要这个，如果你调整你的状态，使它紧跟视图模型（RNPickerSelect 使用）：

const [countries, setCountries] = useState([]);

useEffect(() => {
  DataService.get(API.API_GET_COUNTRY).then((response) => {
    const fetchedCountries = response.data.items.map(item => {
      return {
        label: item.name,
        value: item.id
      };
    });
    setCountries(fetchedCountries);
  });
}, []);

...然后将此状态传递给 RNPickerSelect:

<RNPickerSelect items={countries} />

【讨论】：

感谢您的帮助朋友。实际上，该函数是从另一个组件调用的，以便通过简单地调用该函数来简化我的工作。