reactjs 值改变时状态如何工作？

beq87vna 于 2022-12-29 发布在 React

关注(0)|答案(2)|浏览(133)

我用一个非常简单的例子来检查我对状态如何工作的理解。下面是一个初始值为1的简单计算器。
当我按下按钮+时，控制台显示“运行”，计算器显示“2”，当我再次按下按钮+时，控制台仍然输出“运行”，计算器显示“2”，当我继续按+时，控制台不输出任何东西。

import {useState} from "react";

const App = () => {

    console.log("Run")

    const [counter, setCounter] = useState(1);

    console.log(counter)

    const addHandler = () => {
        setCounter(2);
    };
    const subtractHandler = () => {
        setCounter(counter - 1);
    };
    return <div className="app">
        <h1>{counter}</h1>
        <button onClick={addHandler}>+</button>
        <button onClick={subtractHandler}>-</button>
    </div>
  };

export default App;

第二个输出让我很困惑，因为我的理解是状态变量“counter”改变时state会重新呈现函数。但是，在第一次按下后，counter已经设置为“2”。当按钮+再次按下时，为什么控制台仍然输出“Run”和“2”？

reactjs

来源：https://stackoverflow.com/questions/74921490/how-state-works-when-value-changes

2条答案

按热度按时间

mklgxw1f1#

分配给按钮onClick事件的addHandler不会增加counter值，而是始终分配2值。

const addHandler = () => {
    setCounter(2);  // always setting the value of counter to 2
}

您可能需要访问counter的前一个状态值并递增其值：

const addHandler = () => {
    setCounter(value => value + 1);
}

赞(0）回复(0）举报 2022-12-29

whhtz7ly2#

在addHandlder函数中使用console.log（“Run”），这样，每次调用addHandler函数时，控制台日志都会工作，并将计数器状态设置为：

const addHandler = () => {
  console.log("Run")
  setCounter(counter + 1);
};

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs 值改变时状态如何工作？

2条答案

相关问题

热门标签

最新问答