在 React Native 中使用 rn picker select 显示空数据

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

// 我试图在选择器中显示国家名称列表 select。我从 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} />

在 React Native 中使用 rn picker select 显示空数据

Shows empty data using rn picker select in react native

javascript

api

react-native

axios

react-native-picker-select