选项未显示在 act-select 下拉列表中，但可以看到数组在控制台.log中看起来不错

Question

我有一个异步 api 调用(使用 axios(从服务器获取我所有的'选项'。我可以看到响应甚至修改了 API 以返回数组中带有"标签"和"值"的选项。

我尝试使用该组件，但该组件也不起作用。我什至还没有尝试设置值，只是想显示选项列表。已将组件剥离到最低限度

这是我的完整组件：

import Api from "../API/Api";
import Select from "react-select/async";
// so I have access to the AccessToken for any requests I need to send..
// Might want to 'catch' a 401 error and retry the submission, but lets first
// see if the form works properly
import { useCookies } from "react-cookie";
const GetSuppliers = () => {
  const [cookies] = useCookies("accessToken");
  const [input, setInput] = useState("");
  const [suppliers, setSuppliers] = useState([]);
  const askApi = async searchInput => {
    await Api.get("supplier", {
      headers: {
        Authorization: "Bearer ".concat(cookies.accessToken)
      },
      params: {
        searchString: ""
      }
    }).then(response => {
      setSuppliers(response.data);
      return response.data;
    });
  };
  useEffect(() => {
    askApi();
  }, []);
  if (suppliers.length == 0) {
    return <div>Loading ... </div>;
  } else {
    console.log(suppliers);
    return (
      <div className="DropdownField">
        <Select cacheOptions options={suppliers} defaultOptions />
      </div>
    );
  }
};
export default GetSuppliers;

控制台.log(供应商(;返回：

1: {value: 5609, label: "AAE02-01-AP", name: "Supplier name 2"}
2: {value: 6197, label: "AAG01-01-AP", name: "Supplier name 3"}
3: {value: 6402, label: "AAL01-01-AP", name: "Supplier name 4"}
4: {value: 6486, label: "AAN01-02-AP", name: "Supplier name 5"}

所以我期待它能工作。我在哪里错过了情节？

Answer 1

这是一个菜鸟的错误(至少我是菜鸟，所以没有人可以责怪我(。

在我最初的挣扎中，我尝试了异步选择，因此导入仍然引用了"异步"选择。

改变 import Select from "react-select/async";自： import Select from "react-select";

瞧，选项显示！