勾选框启用useSameInfo时，如何用相同值更新多个React状态？

嘿，我明白你的需求啦——当勾选框启用（也就是useSameInfo为true）时，更新assignFirstName的同时要把billFirstName也同步成一样的值，assignLastName同理对吧？我给你两种实现方案，都能搞定这个问题～

方案一：简化if-else逻辑 #

这种方式直接在原有逻辑上调整，先准备好要更新的状态对象，再根据字段名添加同步的字段：

updateValue = (fieldName, event) => { 
  event.preventDefault(); 
  // 先创建基础的更新对象，包含当前要修改的字段
  const updateObj = { [fieldName]: event.target.value };

  if (this.state.useSameInfo) { 
    if (fieldName === 'assignFirstName') { 
      updateObj.billFirstName = event.target.value;
    } else if (fieldName === 'assignLastName') { 
      updateObj.billLastName = event.target.value;
    } 
    // 以后如果有更多需要同步的字段，直接在这里加else if就行
  } 

  // 一次性更新所有状态，比多次调用setState更高效
  this.setState(updateObj); 

  // 注意：setState是异步的，如果要获取最新状态，要用回调函数
  // this.setState(updateObj, () => {
  //   console.log('最新状态:', this.state);
  // });
}

方案二：用字段映射表（更优雅，扩展性强） #

如果以后可能会有更多需要同步的字段，用映射表来维护对应关系会更简洁，不用写一堆if-else：

updateValue = (fieldName, event) => { 
  event.preventDefault(); 
  const inputValue = event.target.value;
  const updateObj = { [fieldName]: inputValue };

  // 定义assign字段和bill字段的对应关系
  const syncFieldMap = {
    assignFirstName: 'billFirstName',
    assignLastName: 'billLastName',
    // 新增同步字段时，直接在这里加键值对就好，不用动逻辑代码
  };

  // 如果当前字段在映射表里，且useSameInfo为true，就同步更新对应的bill字段
  if (this.state.useSameInfo && syncFieldMap[fieldName]) { 
    updateObj[syncFieldMap[fieldName]] = inputValue;
  } 

  // 用回调函数获取最新状态（可选）
  this.setState(updateObj, () => {
    console.log('状态更新完成，最新值:', this.state);
  }); 
}

小提示 #

setState是异步操作，如果你想在状态更新后执行一些逻辑（比如打印最新状态），一定要用setState的第二个参数（回调函数），不然直接在setState后面打印可能拿到的还是旧状态哦～

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