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

Question

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 得到响应并在国家/地区设置。既然我得到了数据数组。但我无法在选择器中看到数据。请帮我解决这个问题。

Answer 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} />