Question

我正在使用 react-select 库并且我想从测试 API 获取数据到选择中。这是我的代码的样子：

import React, { useState } from "react";

import AsyncSelect from "react-select/async";

const WithPromises = () => {
  const filterData = (inputValue) => {
    const req = fetch("https://jsonplaceholder.typicode.com/todos?_limit=6")
      .then((response) => response.json())
      .then((res) => {
        return res.map(({ title }) => {
          return {
            label: title,
            value: title
          };
        });
      });
    console.log(req, "promise from server");
    return req;
  };

  const promiseOptions = (inputValue) => {
    filterData(inputValue);
  };

  return (
    <AsyncSelect
      cacheOptions
      isClearable={true}
      isSearchable={true}
      defaultOptions
      loadOptions={promiseOptions}
    />
  );
};

export default WithPromises;

我试图在选择的打开下拉列表中获取数据，但我没有管理。
如何在下拉列表中填充数据？
演示：https://codesandbox.io/s/codesandboxer-example-forked-zsj6i?file=/example.js:0-787

Answer 1

我认为您正在从服务器获得任何响应之前更新您的选项。您应该使用 async-await 块从服务器获取数据。如果您使用以下内容更新您的 promiseOptions 块可能会对您有所帮助。请看下面的代码。

const promiseOptions = async (inputValue) => {
    return await filterData(inputValue);
};

希望对你有帮助。谢谢。

Answer 2

您需要记录来自 api 的响应。你在 res 上映射，我们得到了多个对象作为响应，我们需要的数据在数据对象中。所以首先在控制台检查你的资源

使用 React Js 从服务器获取数据

2 个答案: