React中基于Context与命令模式实现Undo/Redo系统遇渲染错误求助

你遇到的警告核心问题是：在UndoRedoProvider的状态更新回调（setState的函数式参数）内部，执行了会修改其他组件（比如EditUser）状态的命令函数。

React的渲染机制不允许在一个组件的状态更新过程中，直接触发另一个组件的状态更新，这会打乱组件的渲染顺序，导致不可预测的行为。你的useUndo中，execute、undo、redo方法都在setState的回调里调用了命令的executeFn或undoFn，而这些函数会调用EditUser的setNameInput，从而触发EditUser的状态更新，此时UndoRedoProvider还在处理自己的状态更新，所以抛出了警告。

另外还有两个次要问题：

1. canRedo的判断逻辑错误，导致redo按钮状态不正确
2. EditUser中的命令存在闭包问题，undoFn捕获的nameInput是旧值，可能导致undo行为异常

1. 重构useUndo：将命令执行移出setState回调 #

把命令的执行逻辑从setState的函数式更新中移出，确保setState只负责管理自身的历史状态，不触发其他组件的更新。同时修复canRedo的判断逻辑：

import { useState, useCallback } from 'react'

interface Command {
  execute: () => void;
  undo: () => void;
}

interface State {
  history: Command[];
  currentIndex: number;
}

export function useUndo() {
  const [state, setState] = useState<State>({ history: [], currentIndex: 0 })

  // 执行新命令：先执行命令，再更新历史（undo后执行新命令会截断后续历史）
  const execute = useCallback((command: Command) => {
    command.execute();
    setState(prev => {
      const newHistory = [...prev.history.slice(0, prev.currentIndex), command];
      return {
        history: newHistory,
        currentIndex: newHistory.length
      };
    });
  }, []);

  // 撤销：先判断是否可撤销，执行撤销逻辑，再更新索引
  const undo = useCallback(() => {
    if (state.currentIndex <= 0) return;
    const targetCmd = state.history[state.currentIndex - 1];
    targetCmd.undo();
    setState(prev => ({ ...prev, currentIndex: prev.currentIndex - 1 }));
  }, [state]);

  // 重做：先判断是否可重做，执行重做逻辑，再更新索引
  const redo = useCallback(() => {
    if (state.currentIndex >= state.history.length) return;
    const targetCmd = state.history[state.currentIndex];
    targetCmd.execute();
    setState(prev => ({ ...prev, currentIndex: prev.currentIndex + 1 }));
  }, [state]);

  const canUndo = state.currentIndex > 0;
  // 修复canRedo逻辑：当currentIndex小于历史长度时，存在可重做的命令
  const canRedo = state.currentIndex < state.history.length;

  return { execute, undo, redo, canUndo, canRedo };
}

2. 完善上下文类型定义 #

给UndoRedoContext添加正确的类型约束，避免类型错误：

import { createContext, useContext } from 'react';
import { useUndo } from './UndoRedo';

// 从useUndo的返回值推导上下文类型
type UndoRedoContextType = ReturnType<typeof useUndo>;

// 初始化上下文为undefined，后续在useUndoRedoContext中做非空校验
const UndoRedoContext = createContext<UndoRedoContextType | undefined>(undefined);

export const UndoRedoProvider = (props: React.PropsWithChildren) => {
  const undoRedo = useUndo();

  return (
    <UndoRedoContext.Provider value={undoRedo}>
      {props.children}
    </UndoRedoContext.Provider>
  );
};

export const useUndoRedoContext = () => {
  const context = useContext(UndoRedoContext);
  if (!context) {
    throw new Error('useUndoRedoContext必须在UndoRedoProvider内部使用');
  }
  return context;
};

3. 修复EditUser的闭包问题 #

在创建命令时，提前保存当前的输入值，避免undoFn捕获到旧的闭包值：

import { useState } from 'react'
import { useUndoRedoContext } from '../context/undoRedoContext'

export function EditUser() {
  const undoRedo = useUndoRedoContext()
  const [nameInput, setNameInput] = useState('')

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    // 提前保存当前的旧值，避免闭包问题
    const oldValue = nameInput;
    undoRedo.execute({
      execute: () => setNameInput(newValue),
      undo: () => setNameInput(oldValue)
    });
  }

  return (
    <>
      <div>
        <input type="text" placeholder='Name' onChange={handleInputChange} value={nameInput} />
        {nameInput}
      </div>
      <div>
        <button onClick={undoRedo.undo} disabled={!undoRedo.canUndo}>Undo</button>
        <button onClick={undoRedo.redo} disabled={!undoRedo.canRedo}>Redo</button>
      </div>
    </>
  )
}

• 给命令添加描述信息，方便调试历史记录
• 对于复杂状态，可以考虑将状态托管到useUndo中，而不是让每个组件自己管理状态，这样undo/redo逻辑更集中
• 使用useCallback包裹所有暴露的方法，避免子组件不必要的重渲染

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