点击浏览器返回或切换路由时重置Redux状态及Formik表单的问题

一、路由切换/返回时重置Redux状态 #

• 在AddProduct组件中，结合React Router的路由监听与useEffect清理函数，触发Redux状态重置：

  import { useDispatch, useSelector } from 'react-redux';
  import { useParams, useEffect } from 'react-router-dom';
  import { resetProduct, getAProduct } from '../redux/slices/productSlice';
  
  const AddProduct = () => {
    const dispatch = useDispatch();
    const { id } = useParams();
  
    // 挂载时获取目标商品数据
    useEffect(() => {
      if (id) {
        dispatch(getAProduct(id));
      }
      // 组件卸载/路由切换时重置状态
      return () => {
        dispatch(resetProduct());
      };
    }, [dispatch, id]);
  
    // 组件其他逻辑
  };
  

• 确保Redux Slice中存在对应的重置reducer：

  import { createSlice } from '@reduxjs/toolkit';
  
  const productSlice = createSlice({
    name: 'product',
    initialState: {
      currentProduct: null,
      // 其他相关状态
    },
    reducers: {
      resetProduct: (state) => {
        state.currentProduct = null;
        // 同步重置其他关联状态
      },
      // 其他reducer
    },
    extraReducers: (builder) => {
      builder.addCase(getAProduct.fulfilled, (state, action) => {
        state.currentProduct = action.payload;
      });
    }
  });
  
  export const { resetProduct } = productSlice.actions;
  export default productSlice.reducer;
  

二、修复Formik表单不更新新商品数据的问题 #

Formik默认仅在组件初始化时读取initialValues，后续Redux状态变更不会自动同步，可通过以下两种方式解决：

方法1：启用enableReinitialize属性 #

给Formik组件添加该属性，当initialValues依赖的Redux状态变化时，自动重新初始化表单：

import { Formik, Form, Field } from 'formik';
import { useSelector } from 'react-redux';

const AddProduct = () => {
  const currentProduct = useSelector(state => state.product.currentProduct);

  return (
    <Formik
      initialValues={currentProduct || { name: '', price: '', description: '' }}
      enableReinitialize={true} // 核心配置
      onSubmit={(values) => {
        // 表单提交逻辑
      }}
    >
      {() => (
        <Form>
          <Field name="name" />
          <Field name="price" />
          <Field name="description" />
          <button type="submit">保存商品</button>
        </Form>
      )}
    </Formik>
  );
};

方法2：手动监听状态更新同步表单值 #

通过useFormikContext获取表单操作方法，结合useEffect监听Redux状态变化，手动更新表单值：

import { Formik, Form, Field, useFormikContext } from 'formik';
import { useSelector, useDispatch } from 'react-redux';
import { useEffect } from 'react';

const ProductFormContent = () => {
  const currentProduct = useSelector(state => state.product.currentProduct);
  const { setValues } = useFormikContext();

  useEffect(() => {
    if (currentProduct) {
      setValues(currentProduct);
    }
  }, [currentProduct, setValues]);

  return (
    <Form>
      <Field name="name" />
      <Field name="price" />
      <Field name="description" />
      <button type="submit">保存商品</button>
    </Form>
  );
};

const AddProduct = () => {
  const currentProduct = useSelector(state => state.product.currentProduct);

  return (
    <Formik
      initialValues={currentProduct || { name: '', price: '', description: '' }}
      onSubmit={(values) => {
        // 表单提交逻辑
      }}
    >
      <ProductFormContent />
    </Formik>
  );
};

额外注意事项 #

• 确保getAProduct异步action在请求新数据时，不会残留旧数据（比如pending状态下不要复用旧的currentProduct值）；
• 检查路由参数id的传递逻辑，避免因id未变化导致useEffect未触发重新获取数据。

内容的提问来源于stack exchange，提问作者MERN Stack Developer