[編輯] - 為代碼示例添加了更多細節。
我正在嘗試構建一個計時器組件。這是我的代碼。
const Timer = () => {
let startTime;
const handleStart = () => {
startTime = Date.now();
console.log(startTime);
};
const handleEnd = () => {
console.log(startTime);
};
return (
<>
<button
onClick={handleStart}
>
Start timer
</button>
<button
onClick={handleEnd}
>
End timer
</button>
</>
)
}
handleStart是一個按鈕handleEnd的單擊處理程式，是第二個按鈕的單擊處理程式。
問題
當我單擊第一個按鈕啟動計時器時，一切正常，并且 的值startTime被記錄到控制臺，所以我知道它已被分配。但是，當我單擊第二個按鈕停止計時器時，它不會記錄startTime. 相反，控制臺輸出是undefined.
我不知道為什么會這樣。有人可以解釋為什么這段代碼不起作用嗎？
uj5u.com熱心網友回復：
在 React 中，您不能只為變數賦值，您必須設定狀態，如下例所示：
import { useState } from "react";
import "./styles.css";
export default function App() {
const [startTime, setStartTime] = useState();
const handleStart = () => {
const dateNow = Date.now();
console.log(dateNow);
setStartTime(dateNow);
};
const handleEnd = () => {
console.log(startTime);
};
return (
<div className="App">
<button type="button" onClick={handleStart}>
Start
</button>
<button type="button" onClick={handleEnd}>
End
</button>
<p>{startTime}</p>
</div>
);
}
密碼箱中的示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/434105.html
標籤：javascript 反应