如何将React FilterMenu组件状态重置为之前已应用的状态？

嘿，这个问题我之前做项目时也碰到过，处理带临时状态的菜单/弹窗时，重置状态确实容易卡壳。别担心，我给你几个实用的解决方案，应该能帮你搞定：

这是最直接的思路：每次用户点击「应用」时，把当前复选框的状态（比如对象或数组）深拷贝下来，存在组件的state或者ref里。当用户点击「取消」时，直接把菜单状态重置为这个快照，再关闭菜单。

举个React函数组件的示例：

import { useState, useRef } from 'react';

function FilterMenu() {
  // 菜单当前的临时编辑状态
  const [tempFilters, setTempFilters] = useState({
    showActive: true,
    showArchived: false,
    showDraft: false
  });
  // 用ref保存用户最后一次确认的状态（避免重复渲染）
  const confirmedFiltersRef = useRef(tempFilters);

  // 应用更改：更新快照，执行后续逻辑（比如通知父组件）
  const handleApply = () => {
    // 深拷贝避免引用类型的状态污染
    confirmedFiltersRef.current = JSON.parse(JSON.stringify(tempFilters));
    // 这里可以调用父组件回调，传递新筛选条件
    // props.onApply(tempFilters);
    // 关闭菜单
    // props.onClose();
  };

  // 取消操作：重置临时状态为已确认快照，再关闭菜单
  const handleCancel = () => {
    setTempFilters(JSON.parse(JSON.stringify(confirmedFiltersRef.current)));
    // 关闭菜单
    // props.onClose();
  };

  // 复选框切换逻辑
  const handleCheckboxChange = (key) => {
    setTempFilters(prev => ({ ...prev, [key]: !prev[key] }));
  };

  return (
    <div className="filter-menu">
      <label>
        <input
          type="checkbox"
          checked={tempFilters.showActive}
          onChange={() => handleCheckboxChange('showActive')}
        />
        显示活跃项
      </label>
      {/* 其他复选框组件... */}
      <div className="menu-actions">
        <button onClick={handleApply}>应用</button>
        <button onClick={handleCancel}>取消</button>
      </div>
    </div>
  );
}

⚠️ 注意：如果你的状态是嵌套对象，一定要用深拷贝，否则会因为引用类型的特性导致状态更新不生效。JSON.parse(JSON.stringify())是简单的深拷贝方式，如果状态里有函数、Symbol等特殊类型，可以用lodash的_.cloneDeep或者自己实现深拷贝逻辑。

如果FilterMenu是子组件，把筛选状态提升到父组件管理会更清晰。父组件保存「已确认的最终状态」，菜单组件只负责展示临时修改的状态；点击「取消」时直接关闭菜单，下次打开时重新从父组件同步原始状态即可。

示例代码：

// 父组件
function ParentComponent() {
  const [confirmedFilters, setConfirmedFilters] = useState({
    showActive: true,
    showArchived: false
  });
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [tempFilters, setTempFilters] = useState(confirmedFilters);

  const handleOpenMenu = () => {
    // 打开菜单时，同步临时状态为已确认的最新状态
    setTempFilters(JSON.parse(JSON.stringify(confirmedFilters)));
    setIsMenuOpen(true);
  };

  const handleApply = (filters) => {
    setConfirmedFilters(filters);
    setIsMenuOpen(false);
  };

  const handleCancel = () => {
    setIsMenuOpen(false);
    // 无需额外重置，下次打开菜单会自动同步已确认状态
  };

  return (
    <div>
      <button onClick={handleOpenMenu}>打开筛选菜单</button>
      {isMenuOpen && (
        <FilterMenu
          filters={tempFilters}
          onFilterChange={setTempFilters}
          onApply={handleApply}
          onCancel={handleCancel}
        />
      )}
    </div>
  );
}

// 子组件FilterMenu
function FilterMenu({ filters, onFilterChange, onApply, onCancel }) {
  const handleCheckboxChange = (key) => {
    onFilterChange(prev => ({ ...prev, [key]: !prev[key] }));
  };

  return (
    <div className="filter-menu">
      <label>
        <input
          type="checkbox"
          checked={filters.showActive}
          onChange={() => handleCheckboxChange('showActive')}
        />
        显示活跃项
      </label>
      <div className="menu-actions">
        <button onClick={() => onApply(filters)}>应用</button>
        <button onClick={onCancel}>取消</button>
      </div>
    </div>
  );
}

这种模式的优势是状态管理更集中，菜单组件只负责UI渲染和交互，逻辑都在父组件，重置状态的操作变得异常简单。

如果你的筛选逻辑很复杂（比如多复选框联动、多类型筛选），用useReducer会比useState更清晰。你可以定义一个RESET action，直接把状态重置为已确认的快照值。

示例代码：

import { useReducer, useRef } from 'react';

// 初始状态
const initialFilters = {
  showActive: true,
  showArchived: false,
  showDraft: false
};

// 状态 reducer
const filterReducer = (state, action) => {
  switch (action.type) {
    case 'TOGGLE_CHECKBOX':
      return { ...state, [action.key]: !state[action.key] };
    case 'RESET':
      return action.payload; // payload 就是已确认的状态快照
    default:
      return state;
  }
};

function FilterMenu() {
  const [state, dispatch] = useReducer(filterReducer, initialFilters);
  const confirmedFiltersRef = useRef(initialFilters);

  const handleApply = () => {
    confirmedFiltersRef.current = JSON.parse(JSON.stringify(state));
    // props.onApply(state);
    // props.onClose();
  };

  const handleCancel = () => {
    dispatch({ 
      type: 'RESET', 
      payload: JSON.parse(JSON.stringify(confirmedFiltersRef.current)) 
    });
    // props.onClose();
  };

  return (
    <div className="filter-menu">
      <label>
        <input
          type="checkbox"
          checked={state.showActive}
          onChange={() => dispatch({ type: 'TOGGLE_CHECKBOX', key: 'showActive' })}
        />
        显示活跃项
      </label>
      {/* 其他复选框组件... */}
      <div className="menu-actions">
        <button onClick={handleApply}>应用</button>
        <button onClick={handleCancel}>取消</button>
      </div>
    </div>
  );
}

大概率是因为你保存的是「组件挂载时的初始状态」，而不是「用户最后一次应用的状态」。比如用户第一次修改并应用了状态，第二次打开菜单又修改，这时点击取消应该回到第一次应用后的状态，而不是组件最初的默认值。所以核心是每次用户点击应用时，都要更新状态快照，而不是只保存一次初始值。

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