Reactjs 如何递增useState对象

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

---

这更像是我遇到的一般理解/语法问题。我的主要尝试如下：

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

或

---

mby这有助于显示我是如何尝试实现结果的–

您需要使用函数setInterval（（）=>（），seconds），inside on useEffect

src:

倒计时组件

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

---

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

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

const计数器=（）=>{
const[counter，setCounter]=useState（{秒：0，分钟：0}）；
useffect（（）=>{
const interval=setInterval（（）=>updateCounter（），1000）；
return（）=>{
间隔时间；
};
}, [])
常量updateCounter=（）=>{
设置计数器（计数器=>{
设{秒，分钟}={…计数器}；
如果（秒===59）{
秒=0；
分钟++；
}否则{
秒++；
}
返回{
秒，
会议记录
}
});
}
返回(
{JSON.stringify（计数器）}
)
}

我想你需要

setCounter（（计数器）=>{…计数器，秒：秒+1）

成功了

setCounter（计数器=>{…计数器，秒数：计数器。秒数+1}）

那么为什么还需要存储秒数？添加您的代码尝试。我不知道是需要解决区间函数性还是状态处理。这更像是我遇到的一般理解/语法问题。我的主要尝试如下：setCounter（（counter）=>counter.seconds+1）或setCounter（（counter）=>{…counter，second:second+1）mby这有助于显示我是如何尝试实现结果的。这看起来很有希望，谢谢你，我会尝试。但是有没有可能在不破坏useState的情况下操纵秒/分钟？是的，你可以不破坏useState，但这是一种更干净的方法。你必须使用

counter.seconds

和

counter.minutesconst {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) 
}, []);

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>
    )
}