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

Question

如何更新具有嵌套对象的 React Hooks 状态对象，该对象包含带索引键的对象？

这是默认状态对象。

  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:{},
  } 
}

Answer 1

怎么样：

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

Answer 2

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

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

展开运算符反转对象的包装以将其从里到外打开。所以打开一个层，我们可以直接访问键值对。 . 此外，还有另一种方法可能会在长期运行.

中为您提供帮助

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

请注意，您还可以使用 shorthand 符号来减少您可以编写的代码量。这里我加入了 return 子句来阐明 setState 与回调的工作原理。无论如何，这是 shorthand 符号。 setForm((oldForm)=> oldForm.effects.0 = variableObject) . 祝你有个愉快的一天

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

How to set an object key inside a state object in React Hooks

javascript

object

spread

react-hooks