代码之家 › 专栏 › 技术社区 › Yangshun Tay

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

react-hooks reactjs javascript

-1

Yangshun Tay · 技术社区 · 6 年前

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>

1 回复 | 直到 6 年前

Yangshun Tay 6 年前

正如文件所述:

然而,不同于 this.setState 在类中,更新状态变量总是替换它,而不是合并它。

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 .

推荐文章

Jonas · 反应挂钩-编辑后更新列表中的项目

2 年前

Selcukusu · 为什么在show-axios-react之后无法清除错误消息

2 年前

swamp blues · 如何从自定义挂钩收集和返回多个函数

2 年前

Daniel · 钩子中的状态跟踪和道具-React如何保持(跟踪)钩子中的状态和道具?

2 年前

Ben_Sven_Ten · 使用自定义IntersectionObserver钩子响应钩子/穷举deps警告

2 年前

FettFrank · 测量渲染React组件的时间

2 年前

ManP22 · 我想在同一次单击中调用两个常量

2 年前

Dhruv B. · 为什么{text.length}在react中不起作用。js代码。我想要更改状态文本的长度。请帮帮我

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

3 年前

David · 如何多次使用fetch-get响应?

3 年前