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 挂钩来设置状态。你可能想重新思考你的逻辑
添加回答
举报