为什么AsyncSelect只显示一次选项?

问题描述

我正在尝试利用<AsyncSelect />从API中提取选项以填充表格。

它可以找到我第一次搜索的东西,我可以选择该选项,然后提示再次输入。

但是,当我键入其他内容时,即使看到数据显示在console.log()中,我也会得到No Options

import React,{ Component } from 'react';
import AsyncSelect from 'react-select/async';

type State = {
  inputValue: string,};

const promi@R_404_6221@ptions = inputValue =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(
        fetch('https://restcountries.eu/rest/v2/all')
        .then(r => r.json())
        .then(rjson => {
          return rjson.map(c => {
            return { name: c.name,label: c.name}
          })
        })
      );
    },1000);
  });

export default class AsyncMulti extends Component<*,State> {
  state = { inputValue: '' };
  handleInputChange = (newValue: string) => {
    const inputValue = newValue.replace(/\W/g,'');
    this.setState({ inputValue });
    return inputValue;
  };
  render() {
    return (
      <AsyncSelect
        isMulti
        loadOptions={promi@R_404_6221@ptions}
      />
    );
  }
}

解决方法

我刚刚意识到在Promise中返回的对象:

{ name: c.name,label: c.name }

键输入错误,应该是:

{ value: c.name,label: c.name }

现在可以使用了。