2 回答

TA貢獻1829條經驗 獲得超9個贊
您的代碼中存在一些錯誤,因此我進行了一些修復。以下是工作版本。如果您需要任何解釋,請告訴我。
const { useState, useRef } = React;
function App() {
const { time, start, stop, reset, onTimeout } = useTimer({
days: 10,
interval: 100,
});
start();
return (
<div>
<h1>{JSON.stringify(time, undefined, 2)}</h1>
</div>
);
}
const useTimer = ({
days = 0,
hours = 0,
minutes = 0,
seconds = 10,
millis = 0,
interval = 1000,
}) => {
const [time, setTime] = useState({
days,
hours,
minutes,
seconds,
millis,
});
const started = useRef(false);
const originalTime = {
days,
hours,
minutes,
seconds,
millis,
};
const countDown = () => {
setTime(t => {
let totalMillis =
1000 *
(t.days * 24 * 3600 +
t.hours * 3600 +
t.minutes * 60 +
t.seconds) +
t.millis -
interval;
return {
days: Math.floor(totalMillis / 86400000),
hours: Math.floor(
(totalMillis % 86400000) / 3600000
),
minutes: Math.floor(
(totalMillis % 3600000) / 60000
),
seconds: Math.floor((totalMillis % 60000) / 1000),
millis: totalMillis % 1000,
};
});
};
const onTimeout = callback => {
callback();
};
const reset = () => {
setTime({ ...originalTime });
};
const stop = () => {
start.current = false;
};
const start = () => {
if (!started.current) {
started.current = true;
setInterval(() => {
if (started.current) countDown();
}, interval);
}
};
return { time, start, stop, reset, onTimeout };
};
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

TA貢獻1921條經驗 獲得超9個贊
問題是:您在嵌套函數中調用了 react hook,這違反了react hooks的規則。
我可以看到您正在嘗試使用 react 函數中其他函數中的 usestate 掛鉤來設置狀態。你可能想重新思考你的邏輯
添加回答
舉報