Reactjs 如何在状态更改时保持计数器值？

在这个组件中，当我更改状态时，它会重新分配我不想要的

计数器=1

。我只希望它只分配一次

counter=1

，然后在重新渲染期间不再分配它

而且，我不想使用

useState

for

counter

来解决这个问题

function App() {
    const [value, setValue] = useState(100);
    let counter = 1;
    return (
    <div>
    <button
        onClick={() => {
        setValue(value - 1);
        counter++;
        }}
    >
        click me
    </button>
    </div>
);
}

export default App;

函数App（）{
const[value，setValue]=useState（100）；
设计数器=1；
返回(
{
设置值（值-1）；
计数器++；
}}
>
点击我
);
}
导出默认应用程序；

您可以使用localStorage持久化计数器：

import { useState } from "react";

function App() {
  const [value, setValue] = useState(100);
  let counter = localStorage.getItem('counter') || 1;
  return (
    <div>
      <button
        onClick={() => {
          setValue(value - 1);
          localStorage.setItem('counter', ++counter);
        }}
      >
        click me
      </button>
    </div>
  );
}

export default App;

从“react”导入{useState}；
函数App（）{
const[value，setValue]=useState（100）；
让counter=localStorage.getItem（'counter'）|| 1；
返回(
{
设置值（值-1）；
setItem（'counter'，++counter）；
}}
>
点击我
);
}
导出默认应用程序；

您可以使用：

useRef返回一个可变的ref对象，其.current属性初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期内持续存在

useRef的内容更改时不会通知您。基因突变 。当前属性不会导致重新渲染

函数应用程序（）{
const[value，setValue]=useState（100）
常量计数器=useRef（1）
返回(
{
设置值（值-1）
逆流++
}}
>
点击我
)
}

只需将useState用于初始化计数器，

const[counter，setcounter]=useState（1）

将函数传递给

useState

，而不是值

const[counter，setcounter]=useState（（）=>1）

谢谢兄弟，它成功了❤

function App() {
  const [value, setValue] = useState(100)
  const counter = useRef(1)
  return (
    <div>
      <button
        onClick={() => {
          setValue(value - 1)
          counter.current++
        }}
      >
        click me
      </button>
    </div>
  )
}