hook重新渲染后，变量运作

苗有趣

于 2021-04-28 11:03:13 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/mxm_xixixi/article/details/116229261

本文介绍了在React中使用useEffect时遇到的无限更新循环警告，原因是组件内部 setState 在useEffect中触发，且依赖项a每次渲染都会改变。解决办法是确保a的引用不变，通过在函数外部定义一个常量noop作为a的值，避免每次渲染时a的引用变化，从而消除警告。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render.

import React, {useState,useEffect} from 'react'
const Demo = ()=>{
  const [data,setData] = useState({})
  const a = {}
	useEffect(()=>{
    setData({})
  },[a])
  return '测试'
}
export default Demo
//上述写法会产生标题的告警，主要是因为setData后，Demo这个函数会从上到下重新执行一遍，执行到a的时候，{}是一个新的引用，所有a变量又变了，如此循环就会出现警告提示的信息

//解决方案，将a变量的值变成同一个引用，在函数的外面定义noop，达到一个引用的效果
import React, {useState,useEffect} from 'react'
const noop = {}
const Demo = ()=>{
  const [data,setData] = useState({})
  const a = noop
	useEffect(()=>{
    setData({})
  },[a])
  return '测试'
}
export default Demo