React下拉框选中项无法即时更新问题求助

你的问题根源有两个：

• 下拉框(<select>)没有和状态entree做值绑定，导致页面DOM的选中状态无法和React state同步
• 生成<option>时用了Math.random()作为key，每次组件渲染都会生成新的随机key，React会重新创建所有option元素，直接破坏了选中状态的关联

修复后的代码 #

import React, { useState, useEffect } from 'react'

const Home = () => {
  // 初始化state为空字符串，和默认选项的value对应
  const [entree, setEntree] = useState('');
  const entryRows = [];

  for (let i = 0; i < 4; i++) {
    entryRows.push(
      // 用固定的i作为key，避免随机key导致的组件重建
      <option value={i} key={i}>
        {i}
      </option>
    );
  }

  useEffect(() => {
    console.log(entree);
  }, [entree]);

  return (
    <div className='container'>
      <div className="row">
        <select
          className="form-select mb-3 col ps-0 me-3 py-3"
          aria-label="Default select example"
          // 绑定value到state，让React控制下拉框的选中状态
          value={entree}
          onChange={(e) => {
            setEntree(e.target.value)
          }}>
          <option value="" defaultValue>Select an entry</option>
          {entryRows}
        </select>
      </div>
    </div>
  )
}

export default Home;

关键修改说明 #

1. 给<select>添加value={entree}：
   React是单向数据流，必须通过value属性把state和下拉框的选中状态绑定起来，这样当entree更新时，页面会自动同步显示对应的选中项。

2. 替换Math.random()为固定的i作为key：
   React依靠key来识别列表元素的唯一性，随机key会让React每次渲染都认为是新元素，重新创建DOM节点，导致之前的选中状态丢失。用循环变量i作为key，既唯一又稳定，能保证option元素的复用性。

3. 初始化state为''：
   和默认选项的value=""对应，确保初始状态下拉框显示默认提示文本。

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