ReactJs结合Material实现多选框时选中值获取结果异常问题求解

存在的问题 #

• Material UI Checkbox 组件未绑定checked属性，组件选中状态与存储在state.name中的选中值完全脱节，导致触发变更事件时状态不同步
• 列表渲染时key属性赋值错误，map方法的第二个参数为数字类型的索引，不存在index.key属性，错误的key会导致React虚拟DOM Diff逻辑异常，状态更新失败
• 直接读取当前state进行更新，在批量更新、闭包场景下容易读取到旧的状态值，导致更新结果不符合预期

修复后的代码 #

选中变更逻辑 #

const onNameChange = (event)=>{
  // 使用函数式更新确保拿到最新的状态值
  setState(prevState => {
    let value = prevState.name.split(";");
    const currentVal = event.target.value;
    if(value.includes(currentVal)){
      const index = value.indexOf(currentVal);
      value.splice(index, 1);
    }else{
      value.push(currentVal);
    }
    // 优化空值过滤逻辑，避免仅能过滤首项空值的问题
    value = value.filter(item => item.trim() !== '');
    return {
      ...prevState,
      name: value.join(";")
    }
  });
}

多选框渲染逻辑 #

<label className="label-value">
  {bridge.parent.arrayNames.map((element, index) => (
    // key优先使用业务唯一ID，无唯一ID时再使用索引
    <label key={element.id ?? index}>
      {element.name}
      <Checkbox 
        value={element.name}
        // 绑定checked属性，同步state中的选中状态
        checked={state.name.split(";").includes(element.name)}
        onChange={onNameChange}
      />
    </label>
  ))}
</label>

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