React Select动态更新选项时输入框显示[object Promise]问题

问题根源 #

1. onInputChange回调返回Promise：你的handleSearch是异步函数（带async标记），直接作为onInputChange的回调时，会返回一个Promise对象。React Select会把这个Promise当作输入值渲染，导致显示[object Promise]。
2. 状态更新快照问题：直接依赖当前filteredResults状态更新新值，异步操作可能导致使用旧的状态快照，引发页面渲染错乱、空白。

修复步骤 #

1. 修正onInputChange调用方式 #

将异步函数用普通函数包裹，避免返回Promise给Select组件：

<Select
  name="entity_key"
  options={data?.entityResults ?? []}
  // 用普通函数包裹异步调用，不返回Promise
  onInputChange={(query) => {
    handleSearch(query, data.id);
  }}
  placeholder="Search Entity Name"
  value={data?.searchQuery ? { label: data.searchQuery, value: data.searchQuery } : null}
  onChange={(selectedOption) => handleEntityChange(selectedOption, data.id)}
  noOptionsMessage={() => "No options available"}
/>

2. 优化状态更新逻辑 #

使用React的函数式状态更新，确保拿到最新的状态快照，避免异步操作导致的状态不一致：

const handleSearch = async (query, id) => {
  let country = null;
  const foundData = filteredResults.find((data) => data.id === id);

  if (foundData) {
    country = foundData.country;
  }

  if (country) {
    try {
      const data = await searchPlayers(country, query);

      if (data.status === 200) {
        const results = data.data.response.items.map((item) => ({
          value: item.pid,
          label: `${item.title} (DOB: ${item.birthdate ?? "N/A"})`,
        }));

        // 改用函数式更新，确保基于最新state修改
        setFilteredResults(prevResults => prevResults.map((player) => {
          if (player.id === id) {
            return { ...player, searchQuery: query, entityResults: results };
          }
          return player;
        }));
      } else {
        console.error("API response error");
      }
    } catch (error) {
      console.error("Error fetching entity data:", error);
    }
  } else {
    console.log("No country found for the selected player.");
  }
};

3. 正确绑定输入值（可选但推荐） #

取消注释value属性，将输入框值与searchQuery绑定，确保输入内容正常显示：

• 若用户输入的是未在选项中的内容，需要将searchQuery包装成Select要求的{label, value}格式，否则组件无法正确渲染输入值。

内容的提问来源于stack exchange，提问作者be MrZulf