时间戳

首页 > 解决方案 > 使用 React Js 从服务器获取数据

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

问题描述

我正在使用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

标签： reactjsfetchreact-select

解决方案

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

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

我希望这能帮到您。谢谢你。

推荐阅读