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;

console.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";

瞧，选项显示出来！

选项未显示在react-select下拉列表中，但可以在console.log中看到该阵列看起来不错

1 个答案: