如何在父组件Reducer执行成功时更新子组件状态？

你遇到的Warning: Cannot update a component (Child) while rendering a different component (Parent)警告，本质是因为reducer在父组件的同步渲染流程中执行，此时直接调用子组件传过来的回调去更新子组件状态，相当于在父组件渲染期间修改另一个组件的状态，违反了React的渲染规则。

下面给出两种可行的解决方案：

方案一：父组件统一管理状态（推荐，符合React单向数据流） #

把需要同步的状态放到父组件的reducer中，通过props传递给子组件，子组件不需要自己维护独立状态，完全依赖父组件的状态更新。这种方式让数据流更清晰，状态变化可追踪。

修改后的完整代码 #

父组件及Reducer

function reducer(state, action) {
  if (action.type === "something") {
    try {
      // 执行你的业务逻辑（比如API请求等）
      return { ...state, updated: true };
    } catch (error) {
      // 错误处理逻辑
      console.error("操作失败:", error);
      return state;
    }
  }
  // 必须添加默认返回，避免state丢失
  return state;
}

function Parent() {
  // 初始化reducer状态
  const [state, dispatch] = useReducer(reducer, { updated: false });

  return <Child dispatch={dispatch} isSuccess={state.updated} />;
}

子组件

import { useEffect } from 'react';

function Child({ dispatch, isSuccess }) {
  // 监听父组件状态变化，执行原本的状态更新逻辑
  useEffect(() => {
    if (isSuccess) {
      // 这里可以做你原本setState(true)后的操作，比如修改本地状态或执行副作用
      console.log("操作成功，触发子组件更新");
    }
  }, [isSuccess]);

  function handleClick() {
    dispatch({ type: "something" });
  }

  return <button onClick={handleClick}>Click me</button>;
}

方案二：异步执行回调（适合必须子组件独立维护状态的场景） #

如果一定要让子组件自己维护状态，只需在reducer中用setTimeout包裹回调，让回调在React渲染周期之外执行，避开同步渲染时的状态更新限制。

修改后的Reducer #

function reducer(state, action) {
  if (action.type === "something") {
    try {
      // 异步执行回调，脱离父组件渲染流程
      setTimeout(() => action.cb(), 0);
      return { ...state, updated: true };
    } catch (error) {
      setTimeout(() => action.cb(error), 0);
      return state;
    }
  }
  return state;
}

子组件可以保留你原本的代码，此时点击按钮后，回调会异步触发，不会在父组件渲染期间修改子组件状态，警告自然消失。

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