Reactjs 如何使用React钩子将对象推入数组

我试图将obj推入嵌套对象中的数组中。最好的方法是什么，因为我希望它也能用新的obj渲染组件

我想要实现的是让用户能够为任务创建新的类别

const [formElements, setFormElements] = useState({
    task: {
        type: 'text',
        value: 'text',
        className: 'task-input'
    },
    categories: {
        type: 'select',
        value: 'select',
        className: 'categories-input',
        cat: [
            {value: 'money', displayValue: 'Money'},
            {value: 'health', displayValue: 'Health'},
            {value: 'daily', displayValue: 'Daily'},
            {value: 'food', displayValue: 'Food'}
        ]
 
        
    }
})

   const buttonAddCategoryHandler = (e) => {
        e.preventDefault()
        setFormElements(prevState => {
            ???

        })
    }

我知道这可能是一个糟糕的问题，但我在理解如何在这种情况下更新状态时遇到了问题。或者这种状态从一开始就不好？

   const buttonAddCategoryHandler = (e) => {
        e.preventDefault()
        const newArray = [...formElements.categories.cat, {value: 'newVal', displayValue: 'Friendly Value'}]
        setFormElements({
          ...formElements,
          categories: {
             ...formElements.categories,
             cat: newArray
             
          }

        })
    }

const[formElements，setFormElements]=useState({
任务：{
键入：“文本”，
值：“文本”，
类名：“任务输入”
},
类别：{
键入：“选择”，
值：“选择”，
className:“类别输入”，
类别：[
{value:'money'，displayValue:'money'}，
{value:'health'，displayValue:'health'}，
{value:'daily'，displayValue:'daily'}，
{value:'food'，displayValue:'food'}
]
}
});
const updatedCategories=（类别）=>{
const catUpdated=categories.cat；
concat（{value:'new'，displayValue:'new'}）；
返回{
…类别，
猫：猫
}
}
const buttonadCategoryHandler=（e）=>{
e、 预防默认值（）
常量updatedState={
…构成要素，
类别：更新的类别（formElements.categories）
}
setFormElements（updatedState）；
}

我想看看如何使用稍微高级一点的钩子<代码>用户教育器。从react文档中查看此注释：

与类组件中的setState方法不同，useState不会自动合并更新对象。您可以通过将函数更新程序表单与对象扩展语法相结合来复制此行为。另一个选项是useReducer，它更适合管理包含多个子值的状态对象

使用

useReducer

，上面的示例可能类似于：

const [state, dispatch] = useReducer((state, action) => {
    switch(action.type){
        case "UPDATE_CAT":
            return { 
                ...state, 
                categories: {
                    ...state.categories,
                    cat: [...state.cat, action.value]
                }
            }
        default:
            return state
    }
})

   const buttonAddCategoryHandler = (e) => {
        e.preventDefault()
        setFormElements(prevState => {
            dispatch({ type: "UPDATE_CAT", value: { value: "vitamins", displayValue: "Vitamins" } })
        })
    }

---

有几种方法可以实现这一点，但请尝试使用spread运算符：

setFormElements((prevState) => {
  return({
    ...prevState,
    categories: {
      ...prevState.categories,
      cat: [
        [...prevState.categories.cat, 
        {value: '123', displayValue: 'abc'}]
      ]
    }
  })
})