如何递增useState对象

Question

const [counter, setCounter] = useState({seconds:0, minutes:0})

不知怎么的，我很难更新这些对象。我想每隔一段时间调用setcounter，并每隔60秒更新一次useEffect中的counter.minutes。但每次尝试，我的代码都会变得越来越多：D

这更像是我的一个一般理解/语法问题。我的主要尝试是这样的：

setCounter((counter)=> counter.seconds +1) 

或

setCounter((counter) => {...counter, second: second+1)

mby这有助于展示我是如何努力实现结果的——

Answer 1

我想你想要

setCounter( (counter) => ({...counter, second: second+1}));

并使其成为

setCounter( counter => ({...counter,seconds:counter.seconds+1 } ));

Answer 2

试试这个。我已经根据您的要求创建了一个组件。

const Counter = () => {
const [counter, setCounter] = useState({seconds:0, minutes:0});

useEffect(() => {
const interval = setInterval(() => updateCounter(), 1000);
return () => {
clearInterval(interval);
};
}, [])

const updateCounter = () => {
setCounter(counter => {
let { seconds, minutes } = { ...counter};
if(seconds === 59) {
seconds = 0;
minutes ++;
} else {
seconds ++;
}
return {
seconds,
minutes
}
});
}
return (
<div>
{JSON.stringify(counter)}
</div>
)
}

Answer 3

您需要使用函数setInterval(((=>((，秒(，内部启用useEffect。

src:https://dev.to/jarodpeachey/creating-a-countdown-using-react-hooks-58k

倒计时组件

const {useState, useEffect} = React;
const Countdown = () => {
const [countdownDate, setCountdownDate] = useState(new Date('12/25/2020').getTime());
const [state, setState] = useState({
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
});
useEffect(() => {
setInterval(() => updateCountdown(), 1000);
}, []);
const updateCountdown = () => {
// TODO: Code to calculate how long between the countdown date and the current time
};
return (
<div>
<div className='countdown-wrapper'>
<div className='time-section'>
<div className='time'>{state.days || '0'}</div>
<small className="time-text">Days</small>
</div>
<div className='time-section'>
<div className='time'>:</div>
</div>
<div className='time-section'>
<div className='time'>{state.hours || '00'}</div>
<small className="time-text">Hours</small>
</div>
<div className='time-section'>
<div className='time'>:</div>
</div>
<div className='time-section'>
<div className='time'>{state.minutes || '00'}</div>
<small className="time-text">Minutes</small>
</div>
<div className='time-section'>
<div className='time'>:</div>
</div>
<div className='time-section'>
<div className='time'>{state.seconds || '00'}</div>
<small className="time-text">Seconds</small>
</div>
</div>
</div>
);
};
export default Countdown;

创建此组件后，必须遵循此

useEffect(() => {
const tick = setInterval(() => setNewTime(), 60000); 
return () => clearInterval(tick) 
}, []);