我找到了答案。
背景
我正在使用React Hook和Functional Component制作计时器。下面的代码运行良好。
type TProps = {
startTime: string;
lapTime: number;
};
export default function RemainTime({ lapTime }: TProps) {
const [lt, setLapTime] = useState<number>(lapTime);
useEffect(() => {
console.log('lapTime is changed');
const timer = setInterval(() => {
console.log('setInterval is called');
setLapTime((prev) => prev - 1);
}, 1000);
return () => {
console.log('component unmounted');
clearInterval(timer);
};
}, [lapTime]);
return <div>Remain Time : {lt}</div>;
}
lt每秒更改一次。
问题
即使我用新的道具({ lapTime: 300 }(重新渲染RemainTime组件，lt也有以前的值。
我想要什么
我希望RemainTime组件在lapTime更改时呈现新的时间。
type TProps = {
startTime: string;
lapTime: number;
};
export default function RemainTime({ lapTime: initialLapTime }: TProps) {
const [lapTime, setLapTime] = useState<number>(initialLapTime);
useEffect(() => {
setLapTime(initialLapTime);
const timer = setInterval(() => {
setLapTime((prev) => prev - 1);
}, 1000);
return () => {
console.log('component unmounted');
clearInterval(timer);
};
}, [initialLapTime]);
return <div>Remain Time : {lapTime}</div>;
}