react-bootstrap-typeahead输入时组件重载值重置无法正常输入问题

问题根因&修复方案 #

1. 直接诱因：外层容器使用动态key导致组件反复卸载挂载 #

你在Search组件的外层div上设置了key={Math.random()}，每次组件触发重渲染（比如context中isLoading、options状态更新时），key值都会重新生成。React会判定这是全新的组件，直接销毁原有组件实例并重新挂载，输入框的内容自然会被重置为初始的defaultInputValue。

修复方法：删除这个动态key，或者替换为固定值，比如key="search-container"。

2. 潜在问题：useEffect传入async函数引发的状态异常 #

你在context的useEffect中直接传入了async函数，而useEffect要求第一个参数返回清理函数或undefined，async函数默认返回Promise，会导致清理逻辑失效，还可能引发闭包问题导致状态更新不符合预期。

修复方法：修改为内部声明异步函数再调用，同时使用函数式更新避免捕获旧状态：

useEffect(() => {
  const fetchGeoInfo = async () => {
    const resp = await fetch(lURL);
    const result = await resp.json();
    setLocation(prev => ({
      ...prev,
      city: result.city,
      lat: result.latitude,
      lon: result.longitude,
      country: result.country_code,
    }));
    console.log("Geo :", result);
  };
  fetchGeoInfo();
}, []);

3. 优化点：handleSearch中loading状态重复设置 #

你在handleSearch函数末尾同步调用了setIsLoading(false)，会导致请求还没返回就先将loading状态重置为false，和异步请求里的状态设置逻辑冲突。

修复方法：删除函数末尾的同步setIsLoading(false)，仅保留请求成功、catch分支里的状态设置即可。

如果需要进一步保证输入框内容可控，可以将defaultInputValue替换为受控属性inputValue，配合onInputChange事件将输入内容存储到本地状态中，避免默认值重置问题。

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