React计数器UI不更新求助：控制台计数正常界面无变化

你的问题在于用普通变量counter管理状态，React无法感知普通变量的变化，自然不会触发组件重渲染，所以UI不会更新。而且手动调用Trick()函数也不会更新已经挂载到DOM上的组件实例。

解决方法是使用React的useState钩子来管理计数器状态，它会在状态更新时自动触发组件重渲染，更新UI。

修正后的Trick.js代码如下：

import { useState } from 'react';

export default function Trick() {
  // 使用useState初始化计数器状态
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
    // 通过setCounter更新状态，触发重渲染
    setCounter(prev => prev + 1);
    console.log("counter", counter + 1);
  };

  return (
    <div>  
      <div>  
        <button onClick={handleClick}>Increment counter</button>  
      </div>  
      <div>  
        counter value is {counter}  
      </div>  
    </div>  
  )  
}

关键说明： #

• useState是React提供的用于管理组件状态的钩子，它返回当前状态值和一个更新状态的函数（setCounter）。
• 当调用setCounter更新状态时，React会重新执行组件函数，并将最新的状态值应用到UI上，这样就能看到计数器数值实时更新了。
• 状态更新函数可以接收一个函数（如prev => prev + 1），确保基于最新的状态值进行更新，避免异步更新导致的问题。

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