如何在 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) 。 祝你今天過得愉快