react函数式组件每次setstate内部变量重新赋值问题

.伊泽瑞尔2024-05-03 21:16

react函数式组件每次setstate内部变量重新赋值问题

- 背景
- 解决办法

背景

react函数式组件每次setstate内部变量重新初始化赋值问题，导致不能够对变量正常赋值和读值。

bash 复制代码

const App: FC = ({ }) => {
  let a:string = '0'
  const [status, setStatus] = useState<string>('')
  console.log(a)
  return (
   <div 
    style={{
      width: '100px',
      height: '100px',
      background: 'red'
    }} 
    onClick={()=>{
      a = '1'
      setStatus('-')
    }}></div>
  )
}

这个时候首先依次打印的是 '0'、'0'因为当setStatus('-'')的时候，函数式组件会重新渲染内部，这样内部变量的声明也会再次执行，此时 a 又变成了 '0'。

解决办法

在函数外部声明此变量即可，这样就能够对变量正常赋值和读值了。

bash 复制代码

let a:string = '0'
const App: FC = ({ }) => {
  const [status, setStatus] = useState<string>('')
  console.log(a)
  return (
   <div 
    style={{
      width: '100px',
      height: '100px',
      background: 'red'
    }} 
    onClick={()=>{
      a = '1'
      setStatus('-')
    }}></div>
  )
}

如果需要再函数内部初始化值，可以现在外部声明变量，然后利用effect初始化值。

bash 复制代码

let a:string
const App: FC = ({ }) => {
  
  const [status, setStatus] = useState<string>('')
  useEffect(()=>{
    a = '0'
  },[])
  console.log(a)
  return (
   <div 
    style={{
      width: '100px',
      height: '100px',
      background: 'red'
    }} 
    onClick={()=>{
      a = '1'
      setStatus('-')
    }}></div>
  )
}
export default App;