如何在 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

1
投票

怎么样：

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

Answer 2

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

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

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

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

请注意，您还可以使用速记符号来减少可以编写的代码量。这里我添加了 return 子句来阐明 setState 与回调的工作原理。无论如何，这是简写符号。

setForm((oldForm)=> oldForm.effects.0 = variableObject)

。祝你有美好的一天