React中使用useState更新数组：下拉选择时状态更新的实现疑问

问题描述 #

我是React新手，正在尝试实现当下拉选择框的选项改变时更新state。示例应用包含一组“公司职位”数组，希望为每个职位的下拉框选择对应的人员名称，当下拉框中的名称改变时，将positions数组中对应项的selected_val更新为选中人员的id。目前已经向子组件传递了回调函数，但不确定selectionChanged函数中需要添加什么内容来更新positions数组。

解决方案 #

要实现这个功能，需要两步关键修改：

• 子组件触发变更时，把当前职位的id和选中的人员id一起传递给父组件的回调函数
• 父组件通过不可变的方式更新state数组，找到对应职位并修改其selected_val

修改后的代码 #

page.js

import { useState } from 'react';
import SelectionRow from './selection-row';

export default function Home() {
  const [positions, setPositions] = useState([
    {id: 1, role : "Executive", selected_val: 2},
    {id: 2, role : "Director", selected_val: 1},
    {id: 3, role : "Manager", selected_val: 0},
    {id: 4, role : "Staff", selected_val: 0}]);

  function selectionChanged(positionId, selectedValue) {
    // 不可变更新state数组，找到对应id的职位并更新selected_val
    setPositions(prevPositions => 
      prevPositions.map(pos => 
        pos.id === parseInt(positionId) 
          ? {...pos, selected_val: parseInt(selectedValue)} 
          : pos
      )
    );
  }

  return (
    <main>
      <form>
        {positions.map((position) => (
          <SelectionRow 
            key={position.id} 
            id={position.id} 
            label={position.role} 
            selected_val={position.selected_val} 
            onSelectionChanged={selectionChanged}
          />
        ))}
      </form>
    </main>
  )
}

selection-row.js

const options = [
    { id: 0, name: "David"}, 
    { id: 1, name: "Andrew"}, 
    { id: 2, name: "Steven"}, 
    { id: 3, name: "Simon"}, 
  ];

export default function SelectionRow({id, label, selected_val, onSelectionChanged}) {
    return (
        <div>
          <label>{label}</label>
          {/* 包装onChange事件，传递当前职位id和选中值 */}
          <select 
            onChange={(e) => onSelectionChanged(id, e.target.value)} 
            value={selected_val} 
            id={id} 
            name={id}
          >
            {options.map((value) => (
              <option value={value.id} key={value.id}>
                {value.name}
              </option> 
            ))}
          </select>
        </div>
    );
}

关键说明 #

1. 传递额外参数：子组件中通过箭头函数包装onChange事件，把当前职位的id和选中的value一起传给父组件，这样父组件能准确知道要更新哪个职位的数据。
2. 不可变更新state：使用setPositions的函数式更新（接收prevState），结合map方法返回新数组，避免直接修改原state数组（React要求state不可变）。
3. 类型转换：因为select的value默认是字符串类型，所以需要用parseInt转成数字，和state中selected_val的数字类型保持一致。

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