javascript - 使用 useState Hook 更新对象数组

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

您可以首先 Array.prototype.filter() fileSize 的 Object.entries()，最后 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)