react-native状态为只读

x759pob2  于 2022-11-25  发布在  React
关注(0)|答案(1)|浏览(160)

react-native中的以下组件:

import { useEffect, useState } from 'react'

let startValue = null // only using this to restart the counter from resetTimer() (other better approaches?)

export const NewTimer = () => {
  const [seconds, setSeconds] = useState(startValue)

  const formatedTime = () => {
    return [pad(parseInt(seconds / 60)), pad(seconds % 60)].join(':')
  }

  useEffect(() => {
    const timer = setInterval(() => setSeconds(++seconds), 1000) // I guess this line triggers the error
    return () => {
      clearInterval(timer)
    }
  }, [])

  return formatedTime
}

const pad = (num) => {
  return num.toString().length > 1 ? num : `0${num}`
}

export const resetTimer = () => {
  startValue = 0
}

导致未捕获的错误:“seconds”为只读
有谁能指出错误在哪里吗?谢谢!

szqfcxe2

szqfcxe21#

当您执行++seconds时,您正在尝试改变secondsthis render,这是不允许的。我将使用setState回调来获取当前值,然后执行seconds + 1,这将完成相同的任务:

useEffect(() => {
  const timer = setInterval(() => setSeconds((seconds) => seconds + 1), 1000)
  return () => {
    clearInterval(timer)
  }
}, [])

相关问题