使用 React useState() 钩子更新和合并状态对象 [英] Updating and merging state object using React useState() hook

问题描述

我发现 React Hooks 文档的这两部分有点令人困惑.使用状态挂钩更新状态对象的最佳做法是哪一种?

想象一下想要进行以下状态更新:

INITIAL_STATE = {propA:真实，propB:真实}状态后 = {propA:真实，propB: false//改变这个属性}

选项 1

从使用 React Hook 文章中，我们了解到这是可能的:

const [count, setCount] = useState(0);设置计数(计数 + 1)；

所以我可以这样做:

const [myState, setMyState] = useState(INITIAL_STATE);

然后:

setMyState({...我的国家，propB:假});

选项 2

从 Hooks Reference 中我们得到:

<块引用>

与类组件中的 setState 方法不同，useState 不会不会自动合并更新对象.你可以复制这个通过将函数更新器形式与对象传播相结合来实现行为语法:

setState(prevState => {//Object.assign 也可以返回 {...prevState, ...updatedValues};});

据我所知，两者都有效.那么区别是什么呢?哪一个是最佳实践?我应该使用传递函数(选项 2)来访问之前的状态，还是应该使用扩展语法(选项 1)简单地访问当前状态?

解决方案

这两个选项都有效，但就像在类组件中使用 setState 一样，当更新从某些东西派生的状态时需要小心已经处于状态.

如果你例如连续两次更新计数，如果不使用更新状态的功能版本，将无法正常工作.

const { useState } = React;功能应用(){const [count, setCount] = useState(0);函数brokenIncrement(){设置计数(计数 + 1)；设置计数(计数 + 1)；}函数增量(){setCount(count => count + 1);setCount(count => count + 1);}返回 (<div><div>{count}</div><button onClick={brokenIncrement}>破碎增量</button><button onClick={增量}>增量</button>

);}ReactDOM.render(, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"><;/脚本><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="root"></div>

I'm finding these two pieces of the React Hooks docs a little confusing. Which one is the best practice for updating a state object using the state hook?

Imagine a want to make the following state update:

INITIAL_STATE = {
  propA: true,
  propB: true
}

stateAfter = {
  propA: true,
  propB: false   // Changing this property
}

OPTION 1

From the Using the React Hook article, we get that this is possible:

const [count, setCount] = useState(0);
setCount(count + 1);

So I could do:

const [myState, setMyState] = useState(INITIAL_STATE);

And then:

setMyState({
  ...myState,
  propB: false
});

OPTION 2

And from the Hooks Reference we get that:

Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

As far as I know, both works. So, what is the difference? Which one is the best practice? Should I use pass the function (OPTION 2) to access the previous state, or should I simply access the current state with spread syntax (OPTION 1)?

解决方案

Both options are valid, but just as with setState in a class component you need to be careful when updating state derived from something that already is in state.

If you e.g. update a count twice in a row, it will not work as expected if you don't use the function version of updating the state.

const { useState } = React;

function App() {
  const [count, setCount] = useState(0);

  function brokenIncrement() {
    setCount(count + 1);
    setCount(count + 1);
  }

  function increment() {
    setCount(count => count + 1);
    setCount(count => count + 1);
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={brokenIncrement}>Broken increment</button>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

这篇关于使用 React useState() 钩子更新和合并状态对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！