React父组件setState触发Cannot update ForwardRef警告如何解决？

触发警告的根本原因 #

React不允许在一个组件的渲染流程中更新另一个组件的状态，你当前的代码在父/子组件的渲染阶段直接调用了状态更新函数，才会抛出该警告。

排查修复步骤 #

• 首先修正父组件内的基础笔误：你声明的图片路径状态更新函数是setValidImagePath，但handleImagePath中调用的setImagePath不存在，直接修正即可：

const handleImagePath = path => setValidImagePath(path);

同时你当前写的handleVisibility接收了bool参数但写死了设为true，如果需要动态控制可见性可以调整为：

const handleVisibility = bool => setIsVisible(bool);

• 检查子组件内handleVisibility的调用方式，禁止在组件顶层渲染逻辑中直接调用：
  如果是绑定到点击等交互事件，必须写成回调形式，不能直接加括号执行：

// 错误写法：组件渲染时就会直接执行更新逻辑
<button onClick={handleVisibility(true)}>切换组件</button>

// 正确写法：只有触发点击事件时才会执行更新
<button onClick={() => handleVisibility(true)}>切换组件</button>

• 如果需要根据props变化自动触发状态更新，把逻辑放到useEffect副作用钩子中，不要直接写在组件顶层：

// 子组件错误写法：直接写在顶层，渲染时就会执行
if (!props.isVisible) {
  props.handleVisibility(true)
}

// 正确写法：组件渲染完成后才会执行副作用逻辑
useEffect(() => {
  if (!props.isVisible) {
    props.handleVisibility(true)
  }
}, [props.isVisible, props.handleVisibility])

• 若handleVisibility需要作为依赖传入useEffect或者透传给深层子组件，用useCallback包裹避免函数重复生成触发不必要的执行：

import { useCallback } from 'react'

const handleVisibility = useCallback(bool => setIsVisible(bool), [])

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