如何解决React中hookstate.js调用.set方法时出现的无限重渲染问题

• 你把druidPowers.shapeshift.powerUsage.set()直接写在了组件的顶层执行逻辑中，没有用任何副作用包裹。
• Hookstate的set方法调用会触发订阅了该状态的组件重渲染，而组件重渲染时又会再次执行顶层的set逻辑，形成「调用set→重渲染→再调用set→再重渲染」的无限循环，所以控制台会持续打印日志。
• 你之前给useEffect加空依赖的操作不生效，是因为问题根本不在那个数据请求的useEffect里，而是在外部的顶层set调用上。

根据powerUsage的业务场景，有两种常见处理方式：

方案1：用带空依赖的useEffect包裹set调用 #

如果这个powerUse的计算方法只需要在组件首次挂载时设置一次，就把它放到空依赖的useEffect里：

const druidPowers = useDruidPowersState(druidPowersState)

useEffect(() => {
  Axios.get('http://localhost:5000/powers/druidpowers/levelone')
    .then((data) => {
        const powersData = data.data.druidpowers[0].powers.levelOne
        druidPowers.shapeshift.set(powersData.shapeshift)
        druidPowers.naturesBoon.set(powersData.naturesBoon)
    })
}, [druidPowers.shapeshift, druidPowers.naturesBoon])

// set逻辑放到空依赖的useEffect中，仅组件首次挂载时执行一次
useEffect(() => {
  druidPowers.shapeshift.powerUsage.set({
      powerUse: {
        hp: (characterHp, body, spirit) => {
          characterHp += (body + spirit)
        }
      }
    })
}, [])

console.log(druidPowers, 'druid powers')

方案2：直接在状态初始化时定义该方法 #

如果这个powerUse的计算逻辑是固定不变的、不需要在组件运行时动态修改，直接把它写到你预先定义druidPowersState的位置即可，不需要在组件中再额外调用set赋值。

你现有数据请求的useEffect依赖设置存在隐患：druidPowers.shapeshift和druidPowers.naturesBoon是你在effect内部修改的状态，会导致这个请求effect也被重复触发，建议把这个effect的依赖也改成空数组，只在组件首次挂载时拉取一次数据即可。

内容的提问来源于stack exchange，提问作者Joseph Padgett