如何更新reactjs中的对象数组

Question

i have a state(array of object) which is as follows:

 const [state,setstate]=useState({picture:'',name:'',job:''})

and i have 3 inputs in Front-end side which get picture,name,job... i define an array to save a collection of objects (consisting of picture,name and job of each person) as follows:

 var colllection=[]

i use collection.push({state}) , but it overrides collection and does not add new state to end of the mentioned array.any idea?

Answer 1

For react state you need to replace the value rather than changing it.

So code something like this:

const [state, setstate] = useState([]);

const handleAddPerson = person => useState(prev => ([...prev, person]));

Where when we want to add a person we set the state to a new array that contains the contents of the original array plus the new object.

useState rather than being passed a new value can be passed a function which takes as an argument the previous value the state held and returns the new value for the state.

I'm used to syntactic sugar for creating a new array [...prev, person] this could be written in plain javascript as prev.concat([person]) .