reactjs - 如何使用 React Hooks 将对象推送到数组中

Question

我正在尝试将 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 => {
            ???

        })
    }

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

标签： reactjsreact-hooks

Answer 1

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

        })
    }