ReactJS-刷新页面后，LocalStorage未更新

Question

我在这里是新手，有人可以帮助我解决这个问题。为什么我在redux上的局部存储在我尝试从Cartitem中删除状态后没有更新？因此，每次我卸下购物车时，我都会刷新.. LocalStorage不会返回新值。有人可以帮我解释一下吗？请帮助

cartslice.js

export const cartRemove = createAsyncThunk(
  'cartRemove/remove',
  async (id, thunkAPI) => {
    try {
      const res = await axios.get(`http://localhost:8000/api/products/${id}`);
      const data = await res.data;
      console.log(data._id);
      thunkAPI.dispatch(removeCart(data._id));
      return localStorage.setItem(
        'cartItems',
        JSON.stringify(thunkAPI.getState().cart.cartItems)
      );
    } catch (error) {}
  }
);

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    cartItems: localStorage.getItem('cartItems')
      ? JSON.parse(localStorage.getItem('cartItems'))
      : [],
  },
  reducers: {
removeCart: (state, action) => {
      return {
        ...state,
        cartItems: state.cartItems.filter(
          (elem) => elem.product !== action.payload
        ),
      };
    },
export default cartSlice.reducer;
export const { addCart, removeCart } = cartSlice.actions;

cartscreen.jsx

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useNavigate } from 'react-router-dom';
import { useLocation, useParams } from 'react-router-dom';
import Message from '../components/Message';
import { addToCart, cartRemove, removeCart } from '../redux/cartSlice';

const CartScreen = () => {
  const dispatch = useDispatch();
  const { cartItems } = useSelector((state) => state.cart);
  const { id } = useParams();
  const navigate = useNavigate();
  let qty = useLocation().search;
  qty = qty ? qty.split('=')[1] * 1 : 1;

  useEffect(() => {
    if (id) {
      dispatch(addToCart({ id, qty }));
    }
  }, [dispatch, qty, id]);

  const removeFromCartHandler = (id) => {
    dispatch(cartRemove(id));
  };

Answer 1

问题在您的thunk中，在这部分中：

thunkAPI.dispatch(removeCart(data._id));
return localStorage.setItem(
    'cartItems',
    JSON.stringify(thunkAPI.getState().cart.cartItems)
  )

您基本上是在尝试更新redux状态，并在访问该新状态之后立即更新，但是thunkapi.getState（）。cart.cartitems ，而不是新的（正如您所期望的那样），而不是新状态，而不是新状态。解决方案是在removecart Slicer还原器中移动本地存储设置器，或者如果您想坚持使用当前的解决方案，则可以执行类似的操作：

export const cartRemove = createAsyncThunk(
  'cartRemove/remove',
  async (id, thunkAPI) => {
    try {
      const res = await axios.get(`http://localhost:8000/api/products/${id}`);
      const data = await res.data;
      console.log(data._id);
      thunkAPI.dispatch(removeCart(data._id));
      const updatedCart = thunkAPI.getState().cart.cartItems.filter(i => i.product !== data._id);
      return localStorage.setItem(
        'cartItems',
        JSON.stringify(updatedCart)
      );
    } catch (error) {}
  }
);