React组件状态更新后未重新渲染的原因是什么？

你的问题核心在于直接修改了useState返回的状态变量，这违反了React状态不可变的原则，导致React无法感知状态变化，自然不会触发组件重新渲染更新UI。

错误原因分析 #

在incrementCounter函数里，你直接执行了counter += 1：

const incrementCounter = () => {
  counter += 1; // 错误：直接修改state变量，未触发React状态更新机制
};

counter是useState返回的不可变值，这里的操作只是修改了当前函数作用域内的一个普通变量，并没有通知React状态发生了改变，所以组件不会重新渲染——控制台打印这个变量会看到数值变化，但UI不会同步更新。

修正方案 #

必须使用useState提供的setCounter更新函数来修改状态，有两种常用方式：

1. 函数式更新（推荐，尤其适合依赖前一次状态的场景）

利用更新函数接收的前状态参数计算新值，能避免异步场景下的状态过期问题：

const incrementCounter = () => {
  setCounter(prevCounter => prevCounter + 1);
};

2. 直接传递新值

如果当前状态更新不依赖前一次状态的瞬时值，也可以直接传递计算后的新值：

const incrementCounter = () => {
  setCounter(counter + 1);
};

完整修正后的代码 #

import React, { useState } from "react";

const Counter = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    // 使用函数式更新确保获取最新的前状态值
    setCounter(prevCounter => prevCounter + 1);
  };

  return (
    <div style={{ textAlign: "center", marginTop: "20px" }}>
      <h1>Counter: {counter}</h1>
      <button onClick={incrementCounter} style={{ padding: "10px 20px", fontSize: "16px" }}>
        Increment
      </button>
    </div>
  );
};

export default Counter;

这样修改后，每次点击按钮都会通过setCounter触发React的状态更新流程，组件会重新渲染，UI就能同步显示最新的计数器数值了。

内容的提问来源于stack exchange，提问作者Nikhil