未捕获的语法错误：JSON 中的意外令牌 u 在 JSON.parse 的 position 0 处（<anonymous> )</anonymous>

Question

When I used localStorage for store cart item, then show me error in console box: Uncaught SyntaxError: Unexpected token u in JSON at position 0 like this, and my output is blank nothing to show,

I have tried like this:

import axios from "axios";
import { CART_ADD_ITEM } from "../constants/cartConstants";

export const addToCart = (productId, qty) => async (dispatch, getState) => {
  const { data } = await axios.get(`/api/products/${productId}`);
  dispatch({
    type: CART_ADD_ITEM,
    payload: {
      name: data.name,
      image: data.image,
      price: data.price,
      countInStock: data.countInStock,
      product: data._id,
      qty,
    },
  });
  localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
};

In the cartAction.js file I have used localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems)); line.

then store.js file:

import { applyMiddleware, combineReducers, compose, createStore } from "redux";
import thunk from "redux-thunk";
import { cartReducer } from "./reducer/cartReducer";
import {
  productDetailsReducer,
  productListReducer,
} from "./reducer/productReducer";

const initialState = {
  cart: {
    cartItems: localStorage.getItem("cartItems")
      ? JSON.parse(localStorage.getItem("cartItems"))
      : [],
  },
};

const reducer = combineReducers({
  productList: productListReducer,
  productDetails: productDetailsReducer,
  cart: cartReducer,
});

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  reducer,
  initialState,
  composeEnhancer(applyMiddleware(thunk))
);

export default store;

If I'm not use this logic

cart: {
    cartItems: localStorage.getItem("cartItems")
      ? JSON.parse(localStorage.getItem("cartItems"))
      : [],
  },

Inside initialState then does not show me any error, but when I used this then show me error.

Any suggestion please.

Answer 1

Probably you saved undefined into the storage because getState().cart.cartItems was undefined at some point.

This is a one-way route as you discovered, because JSON.stringify(undefined) will actually return undefined (not as string) but saving it into localStorage casts it to a string, ending up as "undefined" . Now "undefined" (unlike "" or undefined ) is truthy, so your check doesn't detect it as empty, but then JSON.parse("undefined") will fail because that's not valid JSON, hence the "u" at the start failing already.

It would be best to not try to store undefined at all (check for it first). Likely the state doesn't have the cart items yet at the time at which you try to read them, it sounds like an asynchronous timing issue ( dispatch is asynchronous, the state won't change synchronously immedately after you called it). As jmargolisvt mentioned in the comments, try reading it in a reducer instead.

(Then make sure to delete the bad value from your local storage manually so your code can run again.)

But to avoid the situation where the app is just broken for the user and won't load until they delete their local site data (if they even think of that) - regardless of what caused it - I usually wrap JSON.parse with data from localStorage in a try / catch where I just consider exceptions as empty value, so at least the app will still work and just have lost the data.