页面刷新后本地存储重置为默认值

Question

大家好，最近我正在使用 ReactJS 构建添加到购物车功能，因为我没有后端服务器来存储客户购物车，所以我将其存储在 localstorage 中。当我单击添加到购物车时，该项目被设置到本地存储中，但是刷新页面后，cartItems 值被设置为默认值。

export const Store = createContext();

const initialState = {
  cart: {
    cartItems :[]
  },

};

export function StoreProvider(props) {
  const [items, setItems] = useLocalStorage('cartItems', []);
  const [state, dispatch] = useReducer(reducer, initialState);
  
  useEffect(() => {
    setItems(state.cart.cartItems);
  }, [setItems,state.cart.cartItems]);
  
  const value = { state, dispatch };
  return (<Store.Provider value={value}>{props.children}</Store.Provider>);
}

function reducer(state, action) {

  switch (action.type) {
    case 'ADD_TO_CART': {
      const newItem = action.payload;
      const existItem = state.cart.cartItems.find(
        (item) => item.id === newItem.id
      );
      const cartItems = existItem
        ? state.cart.cartItems.map((item) =>
            item.id === existItem.id ? newItem : item
          )
        : [...state.cart.cartItems, newItem];
...

Answer 1

当此元素在刷新后呈现时，您的 useEffect() 将运行。第一次运行 useEffect 时，它将项目设置为状态中最初的值（空数组）。您应该能够通过在第一次渲染时跳过项目更新来解决此问题，这可以通过在 ref 中存储标志来完成。像这样的东西：

const firstRun= useRef(true);

useEffect(() => {
  if (!firstRun.current) {
    setItems(state.cart.cartItems);
  }
  firstRun.current = false;
}, [firstRun, setItems, state.cart.cartItems]);