如何在 React Hooks 中的 state object 中设置 object 密钥

Question

如何更新反应挂钩 state object 具有嵌套的 object 包含具有索引键的对象？

这是默认的 state object。

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

  })

我的目标是更新效果object 中的第一个键。
我试过一些这样的代码。

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

这种尝试将 object 置于嵌套效果object 之外，就像这样。

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

相反，最终的 object state 应该是这样的。

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

Answer 1

怎么样：

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

Answer 2

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

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

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

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

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