javascript - 为 React hooks 更新 Javascript 对象中属性的最有效方法

Question

我在useState中有以下对象:

const [obj, setObj] = React.useState({ 
       one: {
          index: "one",
          name: "Number one"
       },
       two: {
          index: "two",
          name: "Number two"
       }
    });

我想要的是更新index或name在一次通话中。我有这个:

function update(from, what, value) {
   const objTemp = {...obj};
   obj[from][what] = value;
   setObj(objTemp);
}

我将此函数称为:update('one', 'index', 'Hey')或update('two', 'name', 'Foo') 。我一直在尝试，我可以处理这种情况:

const [x, setX] = React.useState({ one: 'One', two: 'Two' });

function updt(from, value) {
   setX({...x, [from]: value});
}

但是我无法找到一种方法来像最后一个函数一样优化我的第一个函数。我尝试过:

setObj({...obj, [from][what]: value});

但这肯定行不通。有什么办法可以优化我的update功能看起来像我的 updt功能？

Answer 1

你已经很接近了，本质上你需要你正在更新的嵌套对象的第二个对象扩展/变异。

setObj({...obj, [from]: { ...obj[from], [what]: value} });

注意:您仍然浅层复制整个对象，即每个无数的属性，因此这技术上与您所复制的一样高效(就 Big-O 而言)已经有/有过。 (可能会少一些，因为现在有两个价差操作!!)

人们也可能会说它现在的可读性也有点差，现在只剩下一行了。

react 状态更新的重要一步是始终返回新对象引用的纯函数范例，这就是初始对象传播的原因。

我还应该注意，不建议将复杂对象存储在 useState 钩子(Hook)中正是因为这个原因，通过深层嵌套的更新来维护正确的状态更新非常困难更多的工作。对于这些情况，通常建议使用 useReducer。存在相同的更新复杂性，但它是一个更清晰的模式。

const obj = {
  one: {
    index: "one",
    name: "Number one"
  },
  two: {
    index: "two",
    name: "Number two"
  }
};

function update(from, what, value) {
  return {...obj, [from]: { ...obj[from], [what]: value} };
}

console.log(update('one', 'name', 'Number 1'))