React使用checkbox向state数组填充数据时出现重复记录问题求助

数据老陈

2026-10-5

问题根源

你的问题核心是违反了React state的不可变更新原则，同时触发了React 18+ 开发环境严格模式下的更新函数重复执行机制：

你在setState的函数式更新回调中直接使用push/splice修改了原有state.toppings数组，既没有生成新的数组，也没有返回新的state对象
React 18+ 开发环境的严格模式会主动调用两次更新函数，用于检测代码中的副作用问题，你直接修改原数组的写法会导致两次调用都修改了同一个数组，所以出现每次点击添加两次的情况，而外层的updateFormValueCheck确实只会触发一次

修复方案

修改Editor.js中的updateFormValueCheck方法，按不可变原则更新state：

updateFormValueCheck = (event) => {
  const { name, checked } = event.target;
  this.setState(state => {
    // 拷贝原有数组，不直接修改原state
    const newToppings = [...state.toppings];
    if (checked) {
      newToppings.push(name);
    } else {
      const index = newToppings.indexOf(name);
      // 增加存在性判断，避免数组中无对应值时报错
      if (index > -1) {
        newToppings.splice(index, 1);
      }
    }
    // 返回新的state对象触发更新
    return { toppings: newToppings };
  }, () => this.props.submit(this.state));
}