您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

这两个选项都是有效的,但是就像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>
其他 2022/1/1 18:23:18 有480人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶