为什么我的 React 组件中的变量没有按预期增加？

Question

我是一名React学习者，我想了解一些东西。下面的代码不起作用，它只是一个带有两个按钮的组件，可以添加或减去一个数字并显示它。这是完整的代码：

import React from "react";
import { useState } from "react";

const Compteur = () => {
  let i = 0;
  const [number, setNumber] = useState(0);

  const increment = () => {
    i++;
    setNumber(i);
  };

  const decrement = () => {
    i--;
    setNumber(i);
  };

  return (
    <div>
      <button type="button" onClick={increment}>
        +
      </button>
      <button type="button" onClick={decrement}>
        -
      </button>
      <p>Number : {number}</p>
    </div>
  );
};

export default Compteur;

但是，如果我用 setNumber(number + 1) 替换 setNumber(i)，效果会很好。这个 i 变量有什么问题？感谢您的帮助！

Answer 1

欢迎使用 React！

您示例中的问题是每次组件重新呈现（在您的情况下是由于状态更改），i 都会重新初始化并分配一个值 0。我认为您更多地将组件视为循环，而不是 javascript 文件。 React 在维护状态方面做得很好，并且即使重新渲染组件，该状态也会保持不变，这就是为什么当您使用 number （React 状态的一部分）而不是 [=10= 时它会按预期工作的原因]

Answer 2

所以你的问题是设置 let i = 0; 因为反应代码在每次重新渲染时重新运行，这是由状态变化（以及其他方式）引起的。

因此，当您调用 setNumber 时，react 会说“好的，重新呈现页面”，它会沿着您的代码向下移动，并看到“将 i 设置为 0”，然后当您递增代码时说“i++”或在本例中为“0 + 1”（因为我再次设置为 0）。

本质上，每次 react 重新渲染组件时，它都会重置变量中的值。这就是我们必须使用 useState 的原因，因为 React 能够跟踪这些值。

你的例子 setNumber(number + 1) 就是你应该如何写的。

Answer 3

您正在使用变量 i，它会在每次渲染时重新初始化，您的代码应该是这样的

const increment = () => {
    setNumber(number + 1);
}

const decrement = () => {
    setNumber(number - 1);
}

为什么我的 React 组件中的变量没有按预期增加？

Why doesn't a variable increment in my React component as expected?

javascript

reactjs

use-state