如何使用反应钩子更新对象？

Question

I want to update my object when the user clicks on the button, append to array element id. But when I adding data to array it overrides all object without saving previous data. I passed prevState callback but it doesn't work.

const [filteredObject, setFilter] = useState({destinations:[],season:[],difficulty:[],price:'',is_exclusive:'',duration:''});

if (e.currentTarget.name==='destinations') {
   setFilter(prevState=>({...prevState, destinations:[ ...prevState.destinations, e.currentTarget.id]}))
}

Answer 1

When you do destinations:[ e.currentTarget.id] , you are actually overriding the existing array.

You need to do this,

setFilter( prevState => ({
   ...prevState, 
   destinations:[ ...prevState.destinations, e.currentTarget.id ]
}))

Demo