ReactJS中通过复选框列表更新数组值的异常问题

需求：实现复选框列表，勾选选项时在旁显示时间戳，取消勾选则恢复默认值“-”。当前实现中修改选项时，会将之前所有修改过的值重置为默认值，仅当前索引项能编辑，不符合预期。

原初始化代码 #

const defaulttimeVars = ['-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-']; 
const [timeVars, setTimeVars] = useState(defaulttimeVars);

原复选框控制代码 #

const handleChange = (curVal,index) => {
  let defaulttimeVars = timeVars;
  
  let editVal = '';
  let updateArray = [];

 updateArray = defaulttimeVars.map((c, i) => {

//this auto loops through each index
//it needs to check current index and only make an edit to the current index, not the remainder.  
//right now, its supposed to curVal.e === '-' and if that is true update that '-' to the current date, if it is not a '-' then change it to a '-'
//then for everything else its supposed to save as whatever the curVal is

editVal = '';

            if (index.e2 === i){

                  if(curVal.e === '-'){

                    editVal = new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(Date.now());
                    return editVal

                  }else{

                    return '-';

                  }
                
                }else{
                
                  return curVal.e;


              }
            
  });

  setTimeVars(updateArray);

}

问题分析 #

1. 非目标索引值被错误覆盖：map的else分支返回curVal.e，导致所有非当前操作的选项都被设置为当前项的curVal.e（通常是“-”），之前修改的时间戳全部被重置。
2. 数组引用逻辑冗余：直接赋值let defaulttimeVars = timeVars属于引用赋值，虽然这里用了map生成新数组，但核心逻辑错误导致问题。

修正方案 #

方案一：简化逻辑（推荐）

直接创建原数组副本，仅修改目标索引的元素，避免遍历所有项时的错误：

// 简化默认数组创建
const defaulttimeVars = Array(30).fill('-'); 
const [timeVars, setTimeVars] = useState(defaulttimeVars);

const handleChange = (index) => {
  // 创建原state数组的副本，避免直接修改state
  const newTimeVars = [...timeVars];
  // 根据当前值切换时间戳或默认值
  newTimeVars[index] = newTimeVars[index] === '-' 
    ? new Intl.DateTimeFormat('en-US', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).format(Date.now())
    : '-';
  // 更新state
  setTimeVars(newTimeVars);
}

方案二：保留原参数形式修正

如果需要保留原有的curVal和index.e2参数形式，修正map的返回逻辑：

const handleChange = (curVal, index) => {
  const updateArray = timeVars.map((currentItem, i) => {
    if (index.e2 === i) {
      // 仅修改目标索引的元素
      return curVal.e === '-' 
        ? new Intl.DateTimeFormat('en-US', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
          }).format(Date.now())
        : '-';
    } else {
      // 非目标索引保留原数组的已有值，而非curVal.e
      return currentItem;
    }
  });
  setTimeVars(updateArray);
}

修正说明 #

• 非目标索引返回原数组的currentItem（原代码中的c），确保之前修改的时间戳不会被覆盖。
• 用[...timeVars]创建数组副本，或直接基于原state数组做map操作，保证state更新的不可变性。
• 简化默认数组创建：Array(30).fill('-')等价于手动书写30个“-”，代码更简洁。

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