使用@reach/listbox切换列表时显示为空 如何动态渲染列表选项

@reach/listbox 渲染为空的核心原因是选中值和当前选项列表不匹配：

• 你大概率使用了组件的不受控模式，仅设置了defaultValue，该值仅在首次渲染时生效，切换列表后旧选中值不在新选项列表中，组件找不到匹配的可渲染选项
• 部分场景下未给ListboxOption设置唯一稳定的key值，React 虚拟DOM diff时无法正确更新选项节点

将组件改为受控模式，切换列表时同步兼容选中值即可，参考实现代码如下：

import { Listbox, ListboxOption } from "@reach/listbox";
import "@reach/listbox/styles.css";
import { useState } from "react";

// 两组待切换列表
const listGroupA = ["a", "b", "c", "d"];
const listGroupB = ["e", "b", "f", "g"];

export default function App() {
  // 控制当前使用哪组列表
  const [useGroupA, setUseGroupA] = useState(true);
  const currentList = useGroupA ? listGroupA : listGroupB;
  // 受控绑定选中值
  const [selectedValue, setSelectedValue] = useState(currentList[0]);

  const handleSwitchList = () => {
    const nextList = useGroupA ? listGroupB : listGroupA;
    setUseGroupA(!useGroupA);
    // 切换列表时兼容选中值：旧值存在则保留，不存在则默认选新列表第一个
    if (!nextList.includes(selectedValue)) {
      setSelectedValue(nextList[0]);
    }
  };

  return (
    <div style={{ padding: 20, width: 200 }}>
      <button onClick={handleSwitchList} style={{ marginBottom: 16 }}>
        Switch list
      </button>
      <Listbox value={selectedValue} onChange={setSelectedValue}>
        {currentList.map((item) => (
          // 必须给每个选项设置唯一稳定key，禁止用数组下标作为key
          <ListboxOption key={item} value={item}>
            {item}
          </ListboxOption>
        ))}
      </Listbox>
    </div>
  );
}

• 不要仅依赖defaultValue设置默认选中，必须显式绑定Listbox的value属性和onChange事件，实现受控模式
• 切换列表的逻辑中必须做选中值的兼容校验，避免出现选中值不在当前选项列表的情况
• 每个ListboxOption的key必须唯一且和选项内容强绑定，不要使用数组下标作为key

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