Question

当我使用 localStorage 存储 cart 项时，然后在控制台中显示错误：Uncaught SyntaxError: Unexpected token u in JSON at position 0 就像这样，我的输出是空白的，没有显示，

我试过这样：

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));
};

在 cartAction.js 文件中，我使用了 localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems)); 行。

然后是 store.js 文件：

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;

如果我不使用这个逻辑

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

Inside initialState 然后不显示任何错误，但是当我使用它时显示错误。

请提出任何建议。

Answer 1

可能您将 undefined 保存到存储中，因为 getState().cart.cartItems 在某些时候未定义。

正如您发现的那样，这是一条单向路线，因为 JSON.stringify(undefined) 实际上会返回 undefined（不是字符串），但将其保存到 localStorage 会将其强制转换为字符串，最终如"undefined"。现在 "undefined"（与 "" 或 undefined 不同）是真实的，因此您的检查不会将其检测为空，但是 JSON.parse("undefined") 将失败因为那不是有效的 JSON，因此开始时的 "u" 已经失败。

最好不要尝试存储 undefined（首先检查它）。在您尝试读取它们时，状态可能还没有购物车项目，这听起来像是一个异步计时问题（dispatch 是异步的，在您调用它后状态不会立即同步更改）。正如评论中提到的 jmargolisvt，请尝试在减速器中阅读它。

（然后确保手动从本地存储中删除错误值，以便您的代码可以再次运行。）

但是为了避免应用程序被用户破坏并且在他们删除本地站点数据之前不会加载（如果他们甚至想到这一点）的情况 - 无论是什么原因造成的 - 我通常将 {{1 }} 使用 JSON.parse/localStorage 中来自 try 的数据，其中我只将异常视为空值，因此至少应用程序仍然可以运行，只是丢失了数据。

Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>)

1 个答案: