React Redux useSelector绑定下拉框选择取值滞后问题咨询

• React的状态更新方法setInput是异步批量执行的，调用后当前作用域内的input状态不会立刻变更，你紧接着调用showValues读取的还是更新前的旧值，所以出现每次选择都返回上一次结果的问题
• 直接用document.getElementById操作DOM不符合React状态驱动UI的设计规范，容易和React渲染逻辑冲突
• 全局声明的arrTemps数组没有每次调用时重置，多次调用会重复累加数据，导致结果异常

直接移除手动DOM操作逻辑，把选中值的计算逻辑放到渲染环节，依赖最新的状态自动计算渲染即可，修复后的完整代码如下：

const valueTemp = useSelector((state) => state.temperaments)

const [input, setInput] = useState({
    name: "",
    height_min: "",
    height_max: "",
    weight_min: "",
    weight_max: "",
    life_min: "",
    life_max: "",
    image: "",
    temperament: [],
 })

// 封装为纯函数，每次传入最新的选中ID数组计算对应名称
const getSelectedTemperaments = (selectedIds) => {
  const arrTemps = [];
  for(let i = 0; i < selectedIds.length; i++){
    for(let j=0; j < valueTemp.length;j++){
      if(parseInt(selectedIds[i]) === valueTemp[j].id){
        arrTemps.push(valueTemp[j].name)
      }
    }
  }
  return arrTemps.join(',');
}

function handleSelect(e){  
  setInput({
    ...input, 
    temperament: [...input.temperament, e.target.value ]
  })  
}

return (
  <>
    {/* 若需要多选可给select添加multiple属性，e.target.value会自动返回所有选中值数组 */}
    <select className={style.orderLarge} onChange={handleSelect}>
      <option value="">Temperaments:</option>
      {
        valueTemp.map((e) => (
          <option key={e.id} value={e.id}>{e.name}</option>              
        ))
      }
    </select>
    {/* 渲染时直接计算最新选中值，无需手动操作DOM */}
    <div style={{color:'burlywood'}}>
      Temperamentos: {getSelectedTemperaments(input.temperament)}
    </div>
  </>
)

如果你的下拉是单选场景，不需要用数组存储选中值，直接用字符串存储即可，避免重复追加选中值的问题；如果是多选场景，记得给select标签添加multiple属性。

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