如何在 React Hooks 中的状态对象内设置对象键答案

【问题标题】：How to set an object key inside a state object in React Hooks如何在 React Hooks 中的状态对象内设置对象键
【发布时间】：2020-12-02 02:19:00
【问题描述】：

如何更新具有嵌套对象的反应挂钩状态对象，该对象包含具有索引键的对象？

这是默认状态对象。

  const [form, setForm] = useState({
      name:'',
      price:'',
      effects:{
          0:{},
          1:{},
      }

  })

我的目标是更新 effects 对象中的第一个键。
我试过一些这样的代码。

const variable = "Sleepy"
const variableObject = {[variable]:0} 
setForm({...form, ...{...form.effects, ...{0:{ variableObject }} }  })

这种尝试将对象放置在嵌套的 effects 对象之外，就像这样。

{
  0:{"Sleepy":0},
  1:{},
  name:'',
  price:'',
  effects:{
    0:{},
    1:{},
  } 
}

相反，最终的对象状态应该是这样的。

{
  name:'',
  price:'',
  effects:{
    0:{"Sleepy":0},
    1:{},
  } 
}

【问题讨论】：

【解决方案1】：

怎么样：

form.effects[0].Sleepy = 0;
setForm({...form});

【讨论】：

最终用法与你的答案...onSelect={(_, x) => ((form.effects[0][x.value] = 0),(setForm({...form})))}

【解决方案2】：

您正在寻找的解决方案是这样的，

            ...form,
            effects:{
                ...form.effects,
                0: {...variableObject}
            }
        })

扩展运算符反转对象的包装以将其从内向外打开。所以打开一个层，我们可以直接访问键值对。 . 此外，从长远来看，还有另一种方法可能对您有所帮助。

    setForm((oldForm)=>{ 
        return oldForm.effects.0 = variableObject 
    })

请注意，您还可以使用速记符号来减少可以编写的代码量。在这里，我包含了 return 子句，以阐明 setState 与回调的工作方式。无论如何，这里是速记符号。 setForm((oldForm)=> oldForm.effects.0 = variableObject) . 祝你有美好的一天

【讨论】：