react 排队一系列状态变化

最新推荐文章于 2024-11-01 13:37:40 发布

飞飞的小歪

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量138

点赞数

分类专栏： react 前端文章标签： react.js javascript 前端

原文链接：https://beta.reactjs.org/learn/adding-interactivity

版权

前端同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

react

3 篇文章 0 订阅

订阅专栏

这篇博客探讨了一个React组件中的问题，当点击'+3'按钮时，分数只增加一次。原因是状态更新在React中是异步的，导致increment函数被调用多次但只更新一次状态。解决方法是使用状态更新函数的版本，即传递一个更新函数给setScore，确保状态更新被正确排队。这样做可以避免在状态更新之间产生冲突。

摘要由CSDN通过智能技术生成

排队一系列状态变化

这个组件有问题：点击“+3”只会增加一次分数。

import { useState } from 'react';

export default function Counter() {
  const [score, setScore] = useState(0);

  function increment() {
    setScore(score + 1);
  }

  return (
    <>
      <button onClick={() => increment()}>+1</button>
      <button onClick={() => {
        increment();
        increment();
        increment();
      }}>+3</button>
      <h1>Score: {score}</h1>
    </>
  )
}

快照状态解释了为什么会发生这种情况。设置状态请求新的重新渲染，但不会在已经运行的代码中更改它。

可以通过在设置状态时传递更新程序函数来解决此问题。请注意替换如何修复“+3”按钮setScore(score + 1)。setScore(s => s + 1)如果您需要对多个状态更新进行排队，这很方便。

import { useState } from 'react';

export default function Counter() {
  const [score, setScore] = useState(0);

  function increment() {
    setScore(s => s + 1);
  }

  return (
    <>
      <button onClick={() => increment()}>+1</button>
      <button onClick={() => {
        increment();
        increment();
        increment();
      }}>+3</button>
      <h1>Score: {score}</h1>
    </>
  )
}