React开发：下拉选择值变更时如何获取对应_id且避免无限重渲染

报错原因解释 #

在map渲染option节点时直接调用setDepartmentId会触发组件重新渲染，而重新渲染时又会再次执行map逻辑、再次调用set方法，形成「渲染→调用set更新状态→触发重渲染」的无限循环，因此React触发了重渲染次数限制的报错。

正确实现方案 #

这里提供两种常用实现方式，优先推荐第一种，可靠性更高：

方案1：将_id作为option的value值（推荐） #

直接用部门id作为下拉选项的取值，需要部门名称时再从部门列表中匹配即可，避免名称重复导致的匹配错误：

<FormGroup className="mb-1">
    <FormLabel>department</FormLabel>
    <Form.Control 
      as="select" 
      id="create"
      value={departmentId}
      onChange={e => {
          const selectedId = e.target.value
          setDepartmentId(selectedId)
          // 同步设置部门名称
          const selectedDept = departments.find(dept => dept._id === selectedId)
          setDepartment(selectedDept ? selectedDept.name : undefined)
      }}
      required>
        <option value="" selected>select department</option>
        {
            departments.map((dept)=> {
                return (
                    <option key={dept._id} value={dept._id} >
                        {dept.name}
                    </option>
                )
            })
        }
    </Form.Control>
</FormGroup>

方案2：通过选中的部门名称匹配_id #

如果不想修改原有取值逻辑，仍然保留部门名称作为option的value，可在下拉变更时通过名称反查对应id：

<FormGroup className="mb-1">
    <FormLabel>department</FormLabel>
    <Form.Control 
      as="select" 
      id="create"
      value={department}
      onChange={e => {
          const selectedName = e.target.value
          setDepartment(selectedName)
          // 匹配对应部门id
          const selectedDept = departments.find(dept => dept.name === selectedName)
          setDepartmentId(selectedDept ? selectedDept._id : "")
      }}
      required>
        <option value="" selected>select department</option>
        {
            departments.map((dept)=> {
                return (
                    <option key={dept._id} value={dept.name} >
                        {dept.name}
                    </option>
                )
            })
        }
    </Form.Control>
</FormGroup>

内容的提问来源于stack exchange，提问作者Mark Willow Aldave