未捕获的语法错误：JSON 中的意外标记 u 位于 JSON.parse (<anonymous>) 的 0 位置，位于 ./src/context/AuthContext.js

Question

我正在使用 MERN STACK 开发一个预订应用程序，您能帮我解决这个错误吗

所以错误出现在AuthContext.js文件中的这部分代码中

const INITIAL_STATE = {
  user: JSON.parse(localStorage.getItem("user")) || null,
  loading: false,
  error: null,
}

我使用了useEffect

export const AuthContextProvider=({children})=>{
  const [state,dispatch]=useReducer(AuthReducer,INITIAL_STATE);

  useEffect(() => {
    localStorage.setItem("user",JSON.stringify(state.user))
  },[state.user]);

以及随之而来的错误

未捕获的语法错误：JSON 中位于 0 位置的意外标记 u 位于 ./src/context/AuthContext.js 处的 JSON.parse ()

Answer 1

错误消息表明问题在

JSON.parse

内，并在

INITIAL_STATE

中使用。

你可以添加守卫，像这样：

const userLs = localStorage.getItem("user");
const INITIAL_STATE={
  user: userLs ? JSON.parse(userLs) : null,
  loading:false,
  error:null,
}

Answer 2

从

localStorage

获取项目并解析它时，您应该始终记住两件事：

1. 您应该始终处理

   localStorage

   不处理的情况 拥有您想要获取的物品。如果该项目不存在，您的

   localStorage.getItem()

   呼叫将返回

   undefined

   。
2. 您应该永远不将无效的 JSON 对象传递到

   JSON.parse()

   称呼。

   undefined

   不是有效的 JSON 项。 因此，在您的情况下，您应该分离出

   localStorage.getItem()

   调用，并可能将其存储在变量中，然后，仅当您返回有效的 JSON 时，才将该变量传递到您的

   JSON.parse()

   调用中。

这里的其他答案已经为您提供了执行此操作的示例方法。

如果尝试上述操作后仍然出现相同的错误，则您存储的 JSON 值可能已损坏。如果不看

localStorage

实际退回的物品，很难说出原因。您可以从您的

localStorage

中删除该项目并从头开始身份验证，看看是否可以解决问题。

Answer 3

localStorage.get

返回未定义，无法被 JSON.parse 解析。我通常使用这样的函数来捕获错误并返回值本身作为后备。

function parse(value){
   try {
      return JSON.parse(value)
   } catch(_) {
      return value
   }
}

Answer 4

您实际上没有传递您想要存储在本地存储中的详细信息。请将用户详细信息作为对象（在大括号内）传递到后端。

提示：请重建您的数据然后通过

Answer 5

进入React应用页面>>检查>>应用程序>>清除本地存储和cookie>>然后刷新页面并再次登录