• 2023-07-21 更新 / 感謝 @alien663 提點 問題已解決

• 2023-07-17 更新 / 附上完整程式

各位好 最近剛學 react 配合 react-select 套件

一些需求

• 選擇部門後更新人員選項
• 因為用公司做好的 api 來拿到名單所以用 asyncSelect

目前頁面長這樣：

code

npm

• react: ^18.2.0
• react-select: ^5.7.3

結構部分

function

問題來了

我選了部門之後，改變了 state 拿到了正確的人員選項，但我的select 拿到正確 function 卻沒有更新成正確選項

log狀態

補充說明
隨意打個字(就算不在選項內)，他就會顯示正確選項了，但刪掉又會不見...

爬了很多文章好像是說，套件內部會用 inputValue 做 filter，那我要怎麼在不打字的情況正確顯示啊

可以請問這是為什麼，還有要怎麼解決嗎

第一次發問，盡量把問題打清楚了，如果還有缺什麼資訊，可以跟我反應，感謝各位

補充完整程式碼

import { Main } from "@/layouts/main";
import AsyncSelect from "react-select/async";
import { useCallback, useMemo, useState } from "react";

const QAQ = () => {
  console.count("render");
  // ! 設定 dept state
  const [dept, setDept] = useState<string>("0");
  console.log({ dept });

  // ! 員工清單
  const employee = useMemo(
    () => [
      { name: "a", dept: "1" },
      { name: "b", dept: "1" },
      { name: "c", dept: "2" },
      { name: "d", dept: "2" },
      { name: "x", dept: "3" },
      { name: "y", dept: "3" },
      { name: "z", dept: "3" },
    ],
    []
  );

  // ! fetch 部門的選項
  async function getDeptOptions() {
    return new Promise((resolve) => {
      resolve([
        { label: "dept-1", value: "1" },
        { label: "dept-2", value: "2" },
        { label: "dept-3", value: "3" },
      ]);
    });
  }

  // ! filter 人員的公司 拿到正確的名單
  const getDeptEmployee = useCallback(
    function (dept: string) {
      const empInThisDept = employee.filter((e) => e.dept === dept);

      return empInThisDept.map((i) => {
        return { label: i.name, value: i.name };
      });
    },
    [employee]
  );

  // ! fetch 人員的選項
  const getEmpOptions = useCallback(
    async function () {
      return new Promise((resolve, reject) => {
        resolve(getDeptEmployee(dept));
      });
    },
    [dept, getDeptEmployee]
  );
  console.log("options", getEmpOptions());

  // ! 選了部門改變 state
  function handleChange(d: { label: string; value: string }) {
    console.log(d);
    setDept(d.value);
  }
  return (
    <Main>
      <div className='flex items-center gap-4'>
        部門
        <AsyncSelect
          defaultOptions
          loadOptions={getDeptOptions as any}
          onChange={handleChange as any}
          autoFocus
          openMenuOnFocus
        />
        人員
        <AsyncSelect
          defaultOptions
          loadOptions={getEmpOptions as any}
          autoFocus
          openMenuOnFocus
        />
      </div>
    </Main>
  );
};