如何将API数据添加到反应 - 媒体选择中

Question

我在React Native中非常新，我想在中添加API数据 反应本性选择 我想将我的邮政编码添加到我从API

获得的多个选择器中

import MultiSelect from 'react-native-multiple-select';

const [postcode, setPostcode] = useState([])
  const [data2, setData2] = useState([])

 useEffect(() => {
    const fetchstateData = async () => {

      const responsepostal = await axios.post
        (`${urldemo}postal-codes`)
      setData2(responsepostal.data.result);

    }
  }, []); 

这是我从邮政编码API

获得的响应

[{"id": "postcode-0001", "text": "0200"}, {"id": "postcode-00010", "text": "2607"}]

这是我用于造型的返回功能

<MultiSelect
                  hideTags
                  items={postcode}
                  // onSelectedItemsChange={onSelectedItemsChange}
                  onValueChange={(itemValue, itemIndex) =>
                    setPostcode(itemValue)
                  }
                  // selectedItems={selectedItems}
                  selectedValue={postcode}
                  selectText="Post Code"
                  searchInputPlaceholderText="Search Post Code..."
                  altFontFamily="ProximaNova-Light"
                  tagRemoveIconColor="#CCC"
                  tagBorderColor="#CCC"
                  tagTextColor="#CCC"
                  selectedItemTextColor="black"
                  selectedItemIconColor="black"
                  itemTextColor="black"
                  displayKey="name"
                  searchInputStyle={{ color: 'black' }}
                  submitButtonColor="black"
                  submitButtonText="Submit"
                />

我的选择器组件正常工作

<Picker style={GlobalSS.picker}

                  selectedValue={postcode}
                  mode='dropdown'
                  dropdownIconRippleColor='orange'
                  dropdownIconColor='#FF8025'
                  onValueChange={(itemValue, itemIndex) =>
                    setPostcode(itemValue)
                  }>
                  <Picker.Item color='grey'
                    label="Postal code" value="" />
                  {data2.map(item => (
                    <Picker.Item label={item.text} value={item.id} />
                  ))}
                </Picker>

Answer 1

关于您正在使用的库，文档说您应该在此结构之后传递一系列对象

 const items = [{
    id: '92iijs7yta',
    name: 'Ondo'
  }, {
    id: 'a0s0a8ssbsd',
    name: 'Ogun'
  }, {
    id: '16hbajsabsd',
    name: 'Calabar'
  }, {
    id: 'nahs75a5sg',
    name: 'Lagos'
  }, {
    id: '667atsas',
    name: 'Maiduguri'
  }, {
    id: 'hsyasajs',
    name: 'Anambra'
  }, {
    id: 'djsjudksjd',
    name: 'Benue'
  }, {
    id: 'sdhyaysdj',
    name: 'Kaduna'
  }, {
    id: 'suudydjsjd',
    name: 'Abuja'
    }
];

每个对象必须包含一个名称和唯一标识符

因此一旦您从API中获取数据，我将映射结果以便以正确的方式格式化。

就您而言，似乎您只需要像这样替换“文本”字段“文本”：

  [
   {
    "id": "postcode-0001", 
    "name": "0200"
   }, 
   {
    "id": "postcode-00010", 
    "name": "2607"
   }
]