首页  >  问答  >  正文

useState 未更新

你能告诉我为什么我的 useState 仍然是空的吗?它不想更新它。我正在使用 setInteraval 和函数来更新数据,并且希望在当前时间设置 useState,但 useState 忽略 formatTime 中的 setTimeOut(res) 。 你能告诉我如何修复它吗?

编辑:如果我将数字放入 useState

const [timeOut, setTimeOut] = useState(30)

它会在第二秒出现,然后就消失了,我有空的字段。 好像setInterval删除了里面的所有内容,那么如何修复呢?

const Timer = ({item}) => {

  const [timeOut, setTimeOut] = useState('')  // << doent want to update it from 
                                              //         formatTime function
  console.log(timeOut) // still empty


useEffect(() => {
    if (status !== 'unPaid') return;

    const timer = window.setInterval(() => {
        setTimeOut(formatTime(createdAt));
    }, 1000);

    return () => window.clearInterval(timer);
}, [createdAt, status]);



const formatTime = (time) => {
         console.log(time) //  2023-07-25T23:39:39.253Z

         // const timer = new Date(time).getTime() + 1800000
          const timer = new Date(time).getTime() + 250000
          let countDown = new Date().getTime()
          let distance = timer - countDown

          let min = Math.floor((distance % (1000*60*60) / (1000*60)))
          let sec = Math.floor((distance % (1000*60) / (1000)))
          let res = Math.abs(min) + ':' + Math.abs(sec)
          console.log(res)   //  4:50
          setTimeOut(res)   // <<<<<   it doesnt want to apdate my useState
           
 }

P粉245003607P粉245003607424 天前535

全部回复(2)我来回复

  • P粉103739566

    P粉1037395662023-09-15 17:42:24

    这很可能是因为您在超时内设置状态。

    另一个问题是您在其内部调用 setTimeout。

    相反,使用一个根据先前状态返回新值的函数。

    useState 接受一个函数,该函数接收 previousState 作为参数

    const [count, setCount] = useState(0);
    
    useEffect(() => {
      window.setTimeout(() => {
        setCount((prevValue) => {
          return prevValue + 1; // what you return here, will be the new state.
        })
      }, 1000)
    }, []);

    回复
    0
  • P粉990008428

    P粉9900084282023-09-15 09:23:00

    看起来问题是 setInterval 每秒运行一次,并且每秒更新状态(timeOut)。

    此外,在formatTime函数中,您使用的是当前时间(new Date().getTime())而不是createdAt时间。因此,状态每秒不断更新为新值。

    这是更新后的代码。

    const Timer = ({ item }) => {
      const [timeOut, setTimeOut] = useState('');
    
      useEffect(() => {
        if (status !== 'unPaid') return;
    
        const timer = window.setInterval(() => {
          setTimeOut(formatTime(createdAt));
        }, 1000);
    
        return () => window.clearInterval(timer);
      }, [createdAt, status]);
    
      const formatTime = (time) => {
        const timer = new Date(time).getTime() + 250000;
        const currentTime = new Date().getTime();
        const distance = timer - currentTime;
    
        let min = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let sec = Math.floor((distance % (1000 * 60)) / 1000);
        let res = Math.abs(min) + ':' + Math.abs(sec).toString().padStart(2, '0');
        return res;
      };
    
      return <div>{timeOut}</div>;
    };

    回复
    0
  • 取消回复