Function 單擊按鈕時不重新渲染

Question

我正在制作一個簡單的反應計數器，單擊 INC 按鈕時，該值應更改 h1 內的值。 但它不起作用。

我在 App.js 中的代碼：

import React from "react";
import "./styles.css";

export default function App() {
  let count = 0;

  function handleInc () {
    return count++;
  }

  return (
    <>
      <div>
        <h1>{count}</h1>

        <div className='container'>
        <button onClick={handleInc}>INC</button>
        <button>DEC</button>
        <button>RESET</button>
        </div>
      </div>
    </>
  );
}

你能告訴我錯誤是什么嗎？

Answer 1

你需要useState ，在每次點擊時，這個方法會告訴 react 重新渲染這個組件和任何子組件。 從而顯示更新后的 dom 計數器。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  let [count, setCount] = useState(0);

  function handleInc () {
    return setCount(count + 1);
  }

  return (
    <>
      <div>
        <h1>{count}</h1>

        <div className='container'>
        <button onClick={handleInc}>INC</button>
        <button>DEC</button>
        <button>RESET</button>
        </div>
      </div>
    </>
  );
}