使用 react-select 在 ajax 调用后显示 defaultValue

Question

我正在使用 react-select 包，在使用 Ajax 调用加载列表后，默认情况下我无法 select 一个值，这是我的整个组件:

import React, { useEffect, useState } from "react";
import axios from "../../custom/api/axios";
import Select from "react-select";

const UserForm = () => {
  const [managerList, setManagerList] = useState([]);
  const [formattedManagersList, setFormattedManagersList] = useState([]);
  const [selectIsLoading, setSelectIsLoading] = useState(true);
  const [selectedManager, setSelectedManager] = useState(null);

  useEffect(() => {
    getManagers();
    // data loaded:
    // [
    //   { id: 1, displayName: "Test 1" },
    //   { id: 2, displayName: "Test 2" },
    //   { id: 3, displayName: "Test 3" },
    // ];
  }, []);

  const getManagers = async () => {
    setSelectIsLoading(true);
    try {
      const response = await axios.get(
        `${process.env.REACT_APP_API_URL}/managers`
      );
      const formattedList = response.data.data.map((item) => ({
        value: item.id,
        label: item.displayName,
      }));
      setManagerList(response.data.data);
      setFormattedManagersList(formattedList);
      setSelectedManager({ value: 3, label: "Test 3" });
    } catch (err) {
      console.log(err);
    }
    setSelectIsLoading(false);
  };

  return (
    <Select
      options={formattedManagersList}
      isLoading={selectIsLoading}
      placeholder="Select a Manager..."
      onChange={(item) => {
        setSelectedManager(managerList.find((m) => m.id === item.value));
      }}
      selectedValue={selectedManager}
    />
  );
};

export default UserForm;

我正在尝试在组件加载后手动 select a manager，方法是使用 setSelectedManager({ value: 3, label: "Manager Test" }); 将其添加到状态，然后使用 react-select selectedValue 属性 selectedValue={selectedManager}，但没有任何显示。

选项 { value: 3, label: "Test 3" } 确实存在于 formattedManagersList 中，但在加载列表后默认不显示和 selected。

当我使用 value 而不是 selectedValue value={selectedManager} 时，该选项显示在 select 中，但是当我单击并更改 selection 时，没有任何显示作为 selected.

Answer 1

我已经创建 stackblitz link 并解决了您的问题。我已经删除了 axios 而不是使用 delay 函数来模拟您的请求需要时间。我处理了加载时间，最后，我同时使用了 value 和 defaultValue 属性。

希望您觉得它有用。 link to stackblitz example of your issue response.

使用 react-select 在 ajax 调用后显示 defaultValue

Display defaultValue after ajax call using react-select

reactjs

react-select