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

Question

在下面的例子中，当我更新某个字段时，我的状态对象中的另一个字段会消失/取消设置，并且我会收到输入不受控制的警告。以下示例：

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

作为React文档状态：

然而，与类中的this.setState不同，更新状态变量总是替换它，而不是合并它。

因此，使用setUser不会对对象进行浅层合并，而是用整个对象替换状态，从而导致其他字段消失。在执行setUser时，可以使用Object.assign或spread(...(运算符将对象合并在一起。

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>

或者，创建一个名为useMergeState的自定义挂钩，以帮助您像通常的setState一样自动进行合并。