当前位置: 首页 > 面试题库 >

使用React useState()钩子更新和合并状态对象

束涵涤
2023-03-14
问题内容

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

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

INITIAL_STATE = {
  propA: true,
  propB: true
}

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

选项1

从使用React Hook的文章中,我们可以做到:

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

所以我可以做:

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

然后:

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

选项2

从钩子参考中我们可以得出:

与类组件中的setState方法不同,useState不会自动合并更新对象。您可以通过将函数更新程序形式与对象传播语法结合使用来复制此行为:

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

据我所知,两者都可以。那么区别是什么呢?最佳做法是哪一种?我应该使用传递函数(选项2)来访问以前的状态,还是应该简单地使用扩展语法访问当前状态(选项1)?


问题答案:

这两个选项都是有效的,但是就像setState在类组件中一样,在更新从已经处于状态的东西派生的状态时,需要小心。

例如,如果连续更新两次计数,则如果不使用更新状态的函数版本,它将无法按预期工作。

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 Hooks文档的这两部分有些令人困惑。使用状态挂钩更新状态对象的最佳实践是哪一种? 想象一下要进行以下状态更新: 选项1 从使用React Hook的文章中,我们可以做到: 所以我可以做: 然后: 选项2 从钩子参考中我们可以得出: 与类组件中的setState方法不同,useState不会自动合并更新对象。您可以通过将函数更新程序形式与对象传播语法结合使用来复制此行

  • 我有一个对象的状态数组: 我有一个添加按钮,用于将对象添加到数组中,这是onclick事件的主体:

  • 它几乎添加了一个对象,该对象包含来自主窗体的子窗体的值。 这是我用作按钮的函数的函数。 这将一个新对象添加到一个名为的状态,该状态是一个对象数组。 提前谢了。

  • 在基于类的React组件中,我们可以使用setState的函数形式定义处理函数,例如: 其中,两个参数表示传递给此组件的先前状态和更新的道具。 类似地,我们有一个函数形式,使用useState钩子在函数组件中设置状态,如下所示: 但正如我们所看到的,useState钩子中的函数形式缺少表示更新的道具的第二个参数 这是React开发团队故意留下的吗?在useState钩子中设置状态时,我们如何访问更

  • 我正在尝试使用状态将一个表单输入值复制到另一个表单输入值,但状态没有更新 我创建了一个带有按钮的表单,其中左侧表单输入的值应复制到右侧表单输入。这是我的代码: 无论我做什么,dbSecName的状态都不会改变。我试着设置一个新的常量。我尝试使onclick函数异步并等待。如果我为我试图设置的变量的值添加,我可以正确地看到它,但是dbSecName的console.log总是显示原始值。 我真的不知

  • 问题内容: 我正在尝试新的React Hooks,并有一个带有计数器的Clock组件,该计数器应该每秒增加一次。但是,该值不会增加到超过一。 问题答案: 原因是传递给的闭包中的回调仅访问第一个渲染器中的变量,而无法访问后续渲染器中的新值,因为第二次未调用。 回调中的值始终为0 。 就像您熟悉的状态挂钩一样,状态挂钩有两种形式:一种是处于更新状态的状态,另一种是将当前状态传入的回调形式。您应该使用第