Question

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

我已经尝试遵循此线程thread

但是，由于我想使用钩子，因此必须进行一些更改。

我使用了线程顶部注释中的第三种方法（将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

在(async () => { try { const browser = await puppeteer.launch(); const page = await browser.newPage(); await Promise.all([ page.waitForNavigation(), page.goto('http://foo.com'), ]); await page.type('#email', 'foo@foo.com'); await page.type('#password', '12345678'); await (await page.$('#email')).press('Enter'); await page.waitFor(5000); const frames = await page.frames(); console.log('frame>>>', await frames[0].name()); }catch(e){ console.error(e) } })()中，您需要告诉react-select是哪个，而label是哪个。如果您在value数组中没有明确的label和value。

options

React-Select不呈现数据

1 个答案: