使用嵌套字段/对象时，使用React setState挂钩在更新后状态消失

Question

In my example below, when I update a certain field, the other field in my state object disappears/unset and I get a warning about inputs becoming uncontrolled. Example below:

 const {useState} = React; const App = () => { const [user, setUser] = useState({ firstName: 'Mary', lastName: 'Poppins', }); return ( <div> First Name: <input value={user.firstName} onChange={e => { setUser({firstName: e.target.value}); }} /> <br /> Last Name: <input value={user.lastName} onChange={e => { setUser({lastName: e.target.value}); }} /> <br /> {JSON.stringify(user, null, 2)} </div> ); }; ReactDOM.render(<App />, document.querySelector('#app')); 

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div> 

Answer 1

As the React docs state:

However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.

So using setUser does not do a shallow merge of the object, instead it replaces the state with the entire object, which causes the other field to disappear. You could use Object.assign or spread ( ... ) operator to merge the objects together when doing setUser .

 const {useState} = React; const App = () => { const [user, setUser] = useState({ firstName: 'Mary', lastName: 'Poppins', }); return ( <div> First Name: <input value={user.firstName} onChange={e => { setUser(Object.assign({}, user, {firstName: e.target.value})); }} /> <br /> Last Name: <input value={user.lastName} onChange={e => { setUser(Object.assign({}, user, {lastName: e.target.value})); }} /> <br /> {JSON.stringify(user, null, 2)} </div> ); }; ReactDOM.render(<App />, document.querySelector('#app')); 

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div> 

Alternatively, create a custom hook called useMergeState to help you do merging automatically like in the usual setState .