ReactJS 通过复选框列表更新数组值

Question

所以我有一个清单，我希望在检查时在其旁边弹出一个日期作为时间戳，如果未选中，则返回默认值“-”。我创建了一个默认数组，然后用它来确定主数组 timeVars，然后使用复选框更新代码来更新 timeVars 数组值。

我编写的代码有点有效，但它只编辑列表项的一个索引并将所有以前的值更改回默认值，这不是我想要做的。

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);


}

Answer 1

所以我重新设计了它并最终正确更新了它。这是对主 handleChange 查询的更改：

const handleChange = (curVal,index) => {

让defaulttimeVars = timeVars;

让 editVal = '-';

const updateArrayVal = defaulttimeVars.map((c, i) => {

//此自动循环遍历每个索引 //它需要检查当前索引，并且只对当前索引进行编辑，而不是其余部分。
//现在，它应该是 curVal.e === '-' 如果这是真的，则将 - 更新为当前日期，如果不是 - 则将其更改为 - //那么对于其他所有内容，它应该保存为 curVal 的值 editVal = timeVars[i];

            if(i === index.e2 && curVal.e != '-'){
              console.log('index is ' + i + ' and current value is ' + editVal + ' so new array should alter ' + i + ' to -')
              editVal = '-';
              return editVal;


            }else if (i != index.e2 && editVal != '-'){
              console.log('index ' + i + ' is not the current check ' + index.e2 + ' and current ' + editVal + ' is not - so new index value should remain as ' + defaulttimeVars[i])
              editVal = timeVars[i]
              return editVal;

            }else if (i === index.e2 && curVal.e === '-'){
              console.log('index matches check ' + i + ' and current value is ' + editVal + ' so value needs to change to ' + 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()))

              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{
              editVal = timeVars[i]
              return editVal
            }
  

});

setTimeVars(updateArrayVal)

}