使用React Hook与受控组件处理动态列表取值及下拉菜单联动问题

问题根源 #

两个问题的核心原因一致：你所有下拉菜单共用了同一个selectedService状态，没有和对应宠物做唯一绑定，才会出现修改一个所有同步变化、无法分别存储值的问题。

解决方案 #

1. 调整状态存储结构 #

将原来的单个字符串状态改为对象类型，以宠物的_id作为键，对应选中的服务值作为值，天然支持动态增减的宠物列表：

import { useState } from 'react'

// 初始化状态为空对象，后续自动按宠物id存储对应选中值
const [selectedServices, setSelectedServices] = useState({})

2. 修改选中事件处理逻辑 #

给事件处理函数新增宠物id参数，只更新对应宠物的选中状态：

const onChangeHandler = (petId, e) => {
  // 使用函数式更新保证状态正确性
  setSelectedServices(prevState => ({
    ...prevState,
    [petId]: e.target.value
  }))
}

3. 修改下拉菜单的绑定逻辑 #

每个下拉菜单只绑定对应宠物的状态值，触发事件时传入当前宠物的id：

myPetArray.map((mypet) => (
  <Row className='pet-cart-container' key={mypet._id}>
    <Col xs={9} sm={9} md={9} lg={9}>
      <h6>{mypet.petName}</h6>
      <select
        className='form-control'
        value={selectedServices[mypet._id] || ''}
        onChange={(e) => onChangeHandler(mypet._id, e)}
      >
        <option value="">select service base size</option>
        {serviceList
          .filter((element) => element.size === mypet.size)
          .map((service) => (
            // 注意原代码这里value写的是service.key，你的服务对象无key属性，改为service._id
            <option key={service._id} value={service._id}>
              {service.name} - {service.price}
            </option>
          ))}
      </select>
    </Col>
  </Row>
))

取值方式 #

需要获取所有宠物的选中服务时，直接遍历selectedServices对象即可：

• 对象的键为宠物_id，值为选中的服务_id
• 需要服务完整信息的话，直接用服务id去serviceList中匹配对应项即可

额外注意事项 #

你原代码的<option>的value属性写的是service.key，但你提供的服务示例对象中没有key字段，只有_id，记得修改，否则选中值会是undefined。

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