当一个初始状态用于通过 useState 钩子一次启动多个状态时，如何单独设置状态？

Question

I'm trying to initiate several states at the same time using an intialState with useState hook, and they are set separately on several click events. Check the following example:

 const {useState} = React; const Example = () => { const initialState = { name: 'Tom', age: 30, id: 1 }; const [state, setState] = useState(initialState) const handleClickName = (e) => { setState({ name: 'John', age, id }) } const handleClickAge = () => { setState({ name, age: 24, id }) } const handleClickId = () => { setState({ name, age, id: 2 }) } const { name, age, id } = state; return ( <div> <p>{name}</p> <p>{age}</p> <p>{id}</p> <button onClick={handleClickName}>Click 1</button> <button onClick={handleClickAge}>Click 2</button> <button onClick={handleClickId}>Click 3</button> </div> ) } // Render it ReactDOM.render( <Example/>, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>

This works well, clicking each button would update one state. However the problem is in the setState function I have to include all properties like setState({ name: 'John', age, id }) . If there are lots of key/value pairs, it would be cumbersome to repeat everywhere.

Is there a way to only update the required property without including all properties, like setState({ name: 'John' }) ? I tried setState({ name: 'John'}) and it replaced the state with only name property ( age and id are removed).

Answer 1

rest operator to your rescue:

const handleClickName = (e) => {
        setState({
            ...state,
            name: 'John'
        })
 }

Alternatively, you could a class component whose state updates works as you expect here.

Answer 2

You can use the spread operator for that.

setState({...state, name: 'john'})

What this does is create a copy of all the other key/values in the state object and only replace the ones you name in the object.