React：如何向动态列表添加新项并自动选中该新项？

你遇到的问题核心是React状态更新的异步性：调用setItems(newList)后，组件不会立刻更新items状态，此时直接设置idx为newList.length-1，List组件可能还在用旧的items渲染，导致索引超出范围失效。

下面是两种可行的解决方法：

方法一：用useEffect监听items变化 #

通过useEffect监听items状态的更新，当新列表加载完成后，自动设置选中最后一项。这种方法能确保items已经更新后再修改选中索引，避免索引不匹配的问题。

const [items, setItems] = useState([])
const [idx, setIdx] = useState()

useEffect(() => {
  getDataFromServer().then(setItems)
}, [])

// 监听items变化，更新选中索引
useEffect(() => {
  if (items.length > 0) {
    setIdx(items.length - 1)
  }
}, [items])

const add = () => {
  serverAddItem("test item").then((newList) => {
    setItems(newList);
  });
};

return (
  <>
    <List options={items} selectedIndex={idx} />
    <button onClick={add}>添加新项</button>
  </>
)

方法二：直接基于后端返回的newList同步设置（需List组件兼容） #

如果你的List组件允许selectedIndex暂时超出当前options的长度，或者会在options更新后重新校验选中状态，也可以直接在setItems后设置idx——因为后端返回的newList已经是最新的列表，它的长度是准确的，只要List组件能在items更新后正确应用新的idx，这种方式也能生效。

不过这种方法依赖List组件的实现逻辑，不如方法一通用可靠。

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