使用 useState 挂钩更新对象数组

Question

我正在处理下一个 js 项目，我将以下输入对象数组设置为文件大小 useState。这里的键可以被认为是文件列表的索引，值是该特定文件的大小假设从文件列表中删除了第二个索引键值对。然后我需要更改 fileSize 使用状态，以便将第二个索引中的所有值向上移动。我提供了一个输入对象列表和我想要的输出对象列表

input file Object Array:    
   {
      0: 39768
      1: 13264
      2: 69432
      3: 4567
      4: 789
    }
output file Object Array:
    {
      0: 39768
      1: 13264
      2: 4567 
      3: 789
    }

到目前为止我已经尝试过这种方式

const [fileSize,setFileSize] = useState({});

//Here I set the input files array to setFileSize usestate and this is working fine

setFileSize(fileSize => ({
            ...fileSize,
            [num]: f.size,
          }))

现在我需要从删除文件的索引中向上移动值。这意味着上面的输出数组应该设置为 fileSize useState。我试过下面的代码但这不能正常工作

    var length = Object.keys(fileSize).length;

    setFileSize(fileSize => {
      return Object.entries(fileSize).map(([key, value]) => {
           if(key>index && key<length-1){
             return {[parseInt(key)-1]: value}
           }
      })
  });

我需要你的帮助来将 fileSize 状态从输入数组更改为输出数组。任何帮助将不胜感激

Answer 1

你要找的是函数 filter，map 在这种情况下不会帮助你，因为 map 所做的是将数组对象转换为另一个数组对象，不跳过任何（重新调整 null 或不重新调整值只会使 null 和 undefined 值显示在应该删除的值所在的位置）。

Answer 2

检查我的答案，我使用了 foreach() 和 if key == index 删除对象属性。已测试。

已更新。

let index = 2;
let fileSize = { 0: 39768, 1: 13264, 2: 4567, 3: 789 };

Object.entries(fileSize).forEach(([key, value]) => {
  //delete object index key
  if(key == index){ 
    delete fileSize[key];
  };
  
  //the rest iterations after index delete, move up the key value pairs
  if(key > index){
    Object.assign(fileSize,{[key-1]: value});
    delete fileSize[key];
  }
});

console.log(fileSize);

Answer 3

您可以先Array.prototype.filter() the Object.entries() of fileSize and finally Array.prototype.reduce()获取以数组索引作为每个值的键的对象

代码：

const index = 1
const fileSize = { 0: 39768, 1: 13264, 2: 4567, 3: 789 }

const result = Object
  .entries(fileSize)
  .filter(([k]) => +k !== index)
  .reduce((a, [, v], i) => (a[i] = v, a), {})

console.log(result)

使用 useState 挂钩更新对象数组

update the array of object using useState hook

javascript

object

reactjs

next.js

use-state