React函数组件非state普通变量不更新的原因及解决方法

开发者阿泽

2026-9-29

问题原因

你定义的普通count变量处于函数组件的作用域内，React 每次触发组件重渲染时都会完整执行一遍List函数，所以每次重渲染都会重新执行let count = 1的初始化逻辑，之前点击事件里修改的变量值会被直接覆盖，自然会出现每次打印值都相同的情况。
如果你调用的updatePage方法会触发组件重渲染，那每次点击操作执行完成后组件就会刷新，count被重置为初始值1，下一次点击时取到的还是初始值，加1后打印出来的结果自然不会递增。

解决方案

根据你的使用场景选对应方案即可：

需要变量变更触发页面更新：优先用useState存储变量，useState的异步更新特性不会影响业务逻辑取值，需要用到更新后的值时直接使用你计算好的新值即可，不需要依赖state的实时更新：

import { useState } from 'react';

const List = (props) => {
  const [count, setCount] = useState(1);
  const onNextButtonClick = () => {
    const newCount = count + 1;
    console.log(newCount); // 直接使用计算后的新值就能拿到正确结果
    setCount(newCount);
    // 后续需要用到更新后值的逻辑都直接用newCount即可
  }
  return (
    // 页面内容
  )
}

不需要变量变更触发页面更新：用useRef存储持久化变量，useRef存储的值会在组件的整个生命周期内保持，不会因为组件重渲染被重置：

import { useRef } from 'react';

const List = (props) => {
  const countRef = useRef(1);
  const onNextButtonClick = () => {
    countRef.current = countRef.current + 1;
    console.log(countRef.current); // 每次点击都会正常递增
    updatePage();
  }
  return (
    // 页面内容
  )
}