React Bootstrap DropdownButton默认显示首选项及异步列表加载问题咨询

问题原因 #

你当前的写法存在问题的核心是useState的初始值仅会在组件首次渲染时计算一次，此时异步请求还未返回，list为空数组，所以selectedElement初始值为空字符串。后续list异步加载完成后，useState不会主动重新计算初始值，因此无法自动更新为列表首个选项的值。

解决方案 #

你可以通过useEffect监听list数组的变化，待异步加载完成后自动设置默认选中值，具体修改代码如下：

1. 调整状态初始化逻辑

// 初始值直接设为空即可，后续通过useEffect动态设置默认值
const [selectedElement, setSelectedElement] = useState('');

2. 新增useEffect监听list变化

import { useEffect } from 'react';

// 依赖项设置为list和selectedElement，list变化时自动触发校验
useEffect(() => {
  // 仅当list存在有效值、且当前无选中项时，才设置默认选中第一个
  if (list.length > 0 && !selectedElement) {
    setSelectedElement(list[0].name);
  }
}, [list, selectedElement]);

3. 原有Dropdown组件和选择事件逻辑无需改动。

可选优化（加载态处理） #

如果要避免列表加载过程中Dropdown显示空白标题，可以增加加载态判断，示例如下：

{
  list.length > 0 ? 
  <DropdownButton
    id="dropdown-basic-button"
    variant="info"
    className="floatRight"
    onSelect={handleSelect}
    title={selectedElement}
  >
    {list.map((value, i) => {
      return (
        <Dropdown.Item key={i} eventKey={value.name}>
          {value.name}
        </Dropdown.Item>
      );
    })}
  </DropdownButton> :
  <span className="floatRight">选项加载中...</span>
}

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