我正在嘗試用一個簡單的計數器做出反應。 在 console.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

首先，我建議閱讀React Docs 。

但是如果你想創建一個簡單的計數器，我會使用 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 2

嘗試這個

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 3

當前代碼的問題在於，盡管變量可能會自行更新，但第一次呈現的包含值 0 的頁面保持不變。 您要做的是在每次變量更改時觸發重新渲染，以便您可以“看到”頁面上的更新值。

您可以通過對功能組件使用 useState 掛鈎來實現此目的。 您可以在此處的官方文檔中閱讀有關它的更多信息。您可以參考文檔中的第一個示例，它是一個計數器應用程序。