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

【问题标题】：State disappears after update using React setState hook when using nested fields/object使用嵌套字段/对象时，使用 React setState 挂钩更新后状态消失
【发布时间】：2018-11-26 04:53:14
【问题描述】：

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

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>

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

正如 React 文档所述：

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

所以使用setUser 不会对对象进行浅合并，而是将状态替换为整个对象，这会导致其他字段消失。在执行setUser 时，您可以使用Object.assign 或展开(...) 运算符将对象合并在一起。

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 一样自动进行合并。

【讨论】：