React Bootstrap Typeahead下拉框更新后消失问题求助

核心问题：动态id导致组件重复挂载 #

你给AsyncTypeahead设置的id={address_${Date.now()}}是下拉框秒消失的关键原因。每次组件状态更新（比如调用setAddResult更新地址建议列表），组件都会重新渲染，此时Date.now()会生成全新的id值。React会判定这是一个全新组件，卸载旧组件并重新挂载新组件——直接导致下拉框刚显示就被销毁，所以只出现一秒就消失。官方示例用固定id，不会触发这个问题。

修复步骤 #

1. 替换动态id为固定值 #

把id改成静态字符串，避免每次渲染生成新id：

id="address-input"

2. 修正加载状态逻辑 #

你的getData函数在成功获取数据后未将isLoading设回false，会导致组件一直处于加载状态。需要在请求完成后（无论成功失败）结束加载状态：

const getData = async (query: string) => {
     console.log('// onSearch/getData ');
     setIsLoading(true);

     try {
         const result = await getAddressSuggestion(query);
         console.log(result);
         console.log('// request made');
        
         setAddResult(result?.suggestions || []);
         console.log('// Set addResult');
     } catch (e) {
         console.log('Error: ' + e);
         setAddResult([]);
     } finally {
         // 无论请求成败，都结束加载状态
         setIsLoading(false);
     }
 }

3. 可选：移除不必要的filterBy #

因为你通过异步请求直接获取了匹配的地址建议，组件无需再做过滤，filterBy={() => true}可以直接删除，减少多余计算。

修正后的组件代码示例 #

<AsyncTypeahead className="select"
      z-index="1051"
      id="address-input"
      isLoading={isLoading}
      labelKey="zipcode"
      minLength={3}
      onSearch={getData}
      options={addResult}
      placeholder="Enter Address..."
      useCache={false}
      onChange={(v) => {
          if (v.length)
              console.log('// onChange');
          else
              console.log('// onChange NO DATA');
      }}
      onInputChange={text => {
          console.log('// onInputChange')
      }}                  
      renderMenuItemChildren={(option: any, props) => (
          <PanelNoHeader>
              <span key={option.zipcode}>{option.street_line} {option.secondary} {option.city} {option.state} {option.zipcode}</span>
          </PanelNoHeader>
      )}
/>

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