Reactjs 为什么我的react 简单计时器项目不起作用

101:您的组件未在handleLapClick函数上更新.

100

• 使用useState hook将laps更改为state变量
• 不是将值推入laps array，而是通过创建包含当前计时器值的new array来更新laps state.

(创建一个新数组，然后更新LAPS状态的原因是因为一个名为state immutability in Reaction的概念)

100

const [laps, setLaps] = useState<number[]>([]);

const handleLapClick = () => {
    setLaps((prevLaps) => [...prevLaps, timer]);
  };

100

import { useState } from "react";
import { formatSeconds } from "./format";

let interval: NodeJS.Timer;

function App() {
  const [buttonName, setButtonName] = useState("Start");
  const [timer, setTimer] = useState(0);
  const [laps, setLaps] = useState<number[]>([]);

  const handleStartClick = () => {
    setButtonName((prevButtonName) =>
      prevButtonName === "Start" ? "Stop" : "Start"
    );

    if (buttonName === "Start") {
      interval = setInterval(() => {
        setTimer((prevTimer) => prevTimer + 1);
      }, 10);
    } else {
      clearInterval(interval);
    }
  };

  const handleLapClick = () => {
    setLaps((prevLaps) => [...prevLaps, timer]);
  };

  return (
    <div>
      <button onClick={handleStartClick}>{buttonName}</button>
      <button onClick={handleLapClick}>Lap</button>
      <div>
        <p>Elapsed:</p> <pre id="elapsed">{formatSeconds(timer)}</pre>
      </div>
      <hr />
      <div id="laps">
        <p>Laps:</p>
        {laps.map((item, index) => (
          <pre key={index}>{formatSeconds(item)}</pre>
        ))}
      </div>
    </div>
  );
}

export default App;