正在尝试用一个简单的计数器做出反应。在控制台中.log它可以完美运行，但在用户界面中它不会更新计数器

Question

我的Trick.js文件中有如下代码：

let counter = 0;
const handlesclick = () => {
counter++;console.log("counter", counter)
Trick();
};
export default function Trick() {
return (
 <div>  
 <div>  
 <button onClick={handlesclick}>Increment counter</button>  
 </div>  
 <div>  
      counter value is {counter}  
 </div>  
 </div>  
  )  
}

它由index.js:呈现

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Jsx from './Jsx'
import Tools from './Tools';
import Trick from './Trick';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <Jsx />
    <Tools name="Ishmo" tool="Adobe"/>
    **<Trick />**
  </React.StrictMode>
);

控制台中的计数器工作得很好，但在用户界面上则不然。请帮我解决

Answer 1

尝试这个

import { useState } from "react";
export default function Trick() {
  const [counter, setCounter] = useState(0);
  const handlesclick = () => {
    setCounter(counter + 1);
    console.log("counter", counter);
  };
  return (
    <div>
      <div>
        <button onClick={handlesclick}>Increment counter</button>
      </div>
      <div>counter value is {counter}</div>
    </div>
  );
}

Answer 2

首先，我建议阅读React文档。

但是，如果您想创建一个简单的计数器，我会使用React提供的useState钩子来构建它。你的组件看起来像这样。

export default function Trick() {
  const [counter, setCounter] = useState(0);
  const handlesClick = () => setCounter(counter + 1);
  return (
    <div>  
      <div>  
        <button onClick={handlesclick}>Increment counter</button>  
      </div>  
      <div>  
        counter value is {counter}  
      </div>  
    </div>  
  );
}

Answer 3

当前代码的问题是，尽管变量可能正在更新自身，但第一次呈现的包含值0的页面保持不变。您要做的是在每次变量更改时触发重新渲染，以便在页面上"看到"更新后的值。

您可以通过对功能组件使用useState钩子来实现这一点。你可以在这里的官方文档中阅读更多信息你可以参考文档中的第一个例子，它是一个计数器应用程序。