点击Windows后退按钮或更改路线后如何重置到初始状态？

Question

功能/productSlice.js

export const resetState = createAction("Reset_all")

const initialState = {
    products: [],
    product: {},
    productImages: [], 
    isError: false,
    isLoading: false,
    isLoadingPhoto: false,
    isSuccess: false,
    message: "",
}

export const productSlice = createSlice({
    name: "product",
    initialState,
    reducers: {},
    extraReducers: (builder) => {
      builder
      .addCase(getProducts.pending, (state) => {
          state.isLoading = true;
      })
      .addCase(getProducts.fulfilled, (state, action) => {
          state.isLoading = false;
          state.isError = false;
          state.isSuccess = true;
          state.products = action.payload;
      })
      .addCase(getProducts.rejected, (state, action) => {
          state.isLoading = false;
          state.isError = true;
          state.isSuccess = false;
          state.message = action.error;
      })
      .addCase(getAProduct.pending, (state) => {
          state.isLoading = true;
      })
      .addCase(getAProduct.fulfilled, (state, action) => {
          state.isLoading = false;
          state.isError = false;
          state.isSuccess = true;
          state.product['name'] = action.payload.title
          state.product['description'] = action.payload.description
          state.product['price'] = action.payload.price
          state.product['brand'] = action.payload.brand
          state.product['category'] = action.payload.category
          state.product['tags'] = action.payload.tags
          state.product['colors'] = action.payload.color
          state.product['quantity'] = action.payload.quantity
            // state.product['images'] = action.payload.images  
          state.productImages = action.payload.images  
      })
      .addCase(getAProduct.rejected, (state, action) => {
          state.isLoading = false;
          state.isError = true;
          state.isSuccess = false;
          state.message = action.error;
      })
      .addCase(resetState, () => initialState)
    }
})

export default productSlice.reducer

pages/ProductList.jsx

useEffect(() => {
    dispatch(getProducts())
}, [])

const productState = useSelector((state) => state.product?.products) 

const data1 = [];
for (let i = 0; i < productState.length; i++) {
     data1.push({
         key: i + 1,
         title: productState[i].title,
         image: (
             <img style={{objectFit: "cover"}} src={productState[i].images[0].url} width={50} height={50} />
         ),
         brand: productState[i].brand,
         category: productState[i].category,
         color: productState[i].color,
         quantity: productState[i].quantity,
         price: `${productState[i].price}`,
         action: (
                <div className='d-flex align-items-center'>
                    <Link
                        to={`/admin/product/${productState[i]._id}`}
                        className=" fs-3 text-success"
                    > <-- Link redirecting to update product with formik 
                        <BiEdit />
                    </Link>
                    <button
                        className="ms-3 fs-3 text-danger bg-transparent border-0"
                        // onClick={() => showModal(productState[i]._id)}
                    >
                        <AiFillDelete />
                    </button>
                </div>
          )
    });
}

页面/AddProductForm.jsx

const newProduct = useSelector((state) => state.product) 
    
const { isSuccess, isError, isLoading, isLoadingPhoto, createdProduct, product, productImages } = newProduct

const formik = useFormik({ 
    initialValues: {
        title: product.name || "",
        description: product.description || "",
        price: product.price || "",
        brand: product.brand || "",
        category: product.category || "",
        quantity: product.quantity || "",
        color: selectedColors ? selectedColors : [],
        images: productImages ? productImages : []
    },
    validationSchema: schema,
    onSubmit: (values) => {
        console.log(values) 
        
    }
}) 

useEffect(() => {
    if(id !== undefined){ 
        formik.resetForm() 
        dispatch(resetState()) <-- I tried to reset to initial state and reset the formik form before reading the corresponding data
        dispatch(getAProduct(id))
    } else{
        dispatch(resetState())
    }
}, [id]) 

return (  
    <div className="col-10">
        <CustomInput 
          type="text"
          label="Enter product title"
          name="title"
          onChange={formik.handleChange("title")}
          onBlur={formik.handleBlur("title")}
          val={formik.values.title} 
        />
    </div>

我有一个问题，我想在访问

AddProduct

调度

getAProduct(id)

页面时读取现有数据，但如果我单击Windows后退按钮或更改其他路线，则无法重置数据。此外，当单击

ProductList

中表格中的另一个数据时，无法正确读取数据，直到我刷新页面，它仍然显示 formik 中以前的值。有什么解决方案可以修复这个错误吗？

我一直在尝试以不同的方式重置 redux 状态，但即使我

console.log

他们正确显示的值但在 formik 中未正确显示，也没有人工作

Answer 1

尝试使用清理功能。喜欢

  useEffect(() => {
    if(id !== undefined){ 
        dispatch(getAProduct(id))
    }
    return()=>{
        formik.resetForm() 
        dispatch(resetState()) <-- I tried to reset to initial state and reset the formik form before reading the corresponding data
    }
}, [id]) 

当您更改路线或关闭表单组件时，这将清除表单和状态