React Select选择新选项后useEffect未触发更新问题求助

1. 核心错误：useEffect依赖数组为空 #

你用来请求地址接口的useEffect，依赖项配置是空数组[]，React只会在组件首次挂载完成后执行一次这个副作用，后续任何状态变更都不会触发它重新执行。你需要把selectId.id加入到这个useEffect的依赖数组中，这样每次selectId.id发生变化时，useEffect就会自动执行。

修改代码如下：

// 原代码末尾为 }, []); 修改为以下内容
}, [selectId.id]);

2. 其他需要修复的潜在问题 #

• 无用的cityOptions初始化逻辑：你第一个初始化的useEffect依赖为空，执行时selectableTokens还未生成（此时currency接口还没返回数据），而且你给setCityOptions传的是对象{ selectableTokens }，和你声明的数组类型也不匹配。实际上你完全不需要单独维护cityOptions，直接把selectableTokens传给Select组件的options属性即可，可以删掉这部分无用代码。
• 输入框值不更新：你给Form.Control用的是defaultValue，这个属性只会在组件首次渲染时赋值，后续状态变更不会更新。要改成value属性才能响应getAddress的变化：

<Form.Control className="addressInput" readOnly value={getAddress || "No Address"} />

• getCurrency初始值错误：你给getCurrency的初始值设为空字符串，接口返回前getCurrency.map会直接报错，建议把初始值设为空数组：

const [getCurrency, setCurrency] = useState([]);

修复后关键代码片段 #

// 请求地址的useEffect添加依赖，同时补充空值判断避免无效请求
useEffect(() => {
  const api = new Api();
  let mounted = true;

  if (!localStorage.getItem("ACCESS_TOKEN")) {
    router.push("/login");
    return;
  }
  if (mounted && selectId.id) {
    api
      .getRequest(
        `${process.env.NEXT_PUBLIC_URL}api/address?currency=${selectId.id}`
      )
      .then((response) => {
        const data = response.data;
        dispatch(setUserData({ ...data }));
        setAddress(data.address);
      })
      .catch((error) => {});
  }
  return () => (mounted = false);
}, [selectId.id, router, dispatch]);

// Select直接用selectableTokens作为选项
<Select
  isClearable
  isSearchable
  onChange={onCitySelect}
  value={selectCity}
  options={selectableTokens}
  placeholder="Select Coin"
  className="col-md-4 selectCurrencyDeposit"
/>

// 输入框改用value属性响应状态变化
<Form.Control className="addressInput" readOnly value={getAddress || "No Address"} />

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