React-select 不渲染数据

Question

我正在尝试使用 react-select 制作一个简单的下拉菜单，其值来自 public API。然而，即使从 API 中提取似乎工作正常（console.log() 显示所需数据），但下拉选择中没有选项。

我试过关注这个帖子

但是因为我想使用hooks，所以我不得不做一些改变。

我使用了线程顶部评论中的第三种方法（将 labelKey 和 valueKey 作为道具传递的方法，而不是创建新数组），但下拉列表是只是充满了空字段。

这是来自 API

的数据示例

"results:[
 {"name":"Algeria","code":"DZ","cities":1,"locations":1,"count":1149},
 {"name":"Andorra","code":"AD","cities":2,"locations":3,"count":80963},
 {"name":"Argentina","code":"AR","cities":1,"locations":4,"count":14976}
]

下面是实际功能的代码

function SearchBar(props) {
  const [options, setOptions] = React.useState([]);

  function handleChange(e) {
    props.setCountryName(e.value);
    }

    useEffect(() => {
      async function FetchData() {
        fetch(`https://api.openaq.org/v1/countries?limit=300`, {mode: 'cors'})
          .then(res => res.json())
            .then(
            (result) => {
              setOptions(result.results)
            })
          }   
          FetchData()   
      }
    ,[])  

    console.log(options);

  return(
    <Select
    className='react-select-container'
    placeholder="Choose country" 
    onChange={handleChange}
    labelKey="name"
    valueKey="code"
    options={options}
    />
  )
}

Answer 1

在react-select中你需要区分哪个是label哪个是value。如果 options 数组中没有明确的 label 和 value。

<Select
    className='react-select-container'
    placeholder="Choose country" 
    onChange={handleChange}
    labelKey="name"
    valueKey="code"
    getOptionLabel={option => {
          return option.name;
        }}
    getOptionValue={option => {
          return option.code;
        }}
    options={options}
 />

React-select 不渲染数据

React-select does not render data

javascript

reactjs

react-select

react-hooks