Javascript 在react/NextJS中使用cookie react解析JSON cookie时出现奇怪行为

我有一个名为“\u user\u attributes”的cookie。cookie包含一个URL编码的JSON数据字符串。比如说,

%7B%22user_id%22%20%3A%20%2212345%22%2C%20%22user_givenName%22%20%3A%20%22First%22%20%7D

哪个解码为

{"user_id" : "12345", "user_givenName" : "First" }

基本上，我想把解码后的cookie变成一个对象。因此，我一直在做以下工作：

var _user_attributes = cookies.get('_user_attributes')
const user_attributes = JSON.parse(_user_attributes)

这就行了。但奇怪的是，它只在我第一次加载页面时起作用。如果我刷新页面，我会得到“SyntaxError:位置0处JSON中的意外标记u”

我完全搞不懂为什么会这样。如果有人有任何建议，我将不胜感激。我的页面的完整代码如下

import React，{Component，createRef}来自“React”；
从“react cookie”导入{withCookies，Cookies}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）
const{cookies}=props；
var\u user\u attributes=cookies.get（“\u user\u attributes”）
const user\u attributes=JSON.parse（\u user\u attributes）
console.log（_user_属性）
此.state={
名称：user_attributes.name
}
}
render（）{
返回(
{this.state.name}

);
}
}
导出默认cookies（应用程序）

在存储在cookie中时对JSON进行编码，但在读回时，cookie值直接反馈到

JSON.parse

，无需解码。由于JSON解析器无法解析编码的值，因此会抛出错误

这是用于工作cookie检索的codesandbox-

import React，{Component}来自“React”；
从“react cookie”导入{WithCookie}；
类测试扩展了组件{
建造师（道具）{
超级（道具）；
const{cookies}=props；
var_user_attributes=cookies.get（“_user_attributes”）；
如果（\u用户\u属性）{
_用户\u属性=解码URI（\u用户\u属性）；
const user\u attributes=JSON.parse（\u user\u attributes）；
console.log（用户属性）；
此.state={
名称：user\u attributes.user\u givenName
};
}
//如果cookie不存在。仅为测试而添加
否则{
让temp={user_id:“12345”，user_givenName:“First”}；
temp=encodeURI（JSON.stringify（temp））；
set（“_user_attributes”，temp，{path:“/”}）；
}
}
render（）{
返回{this.state？.name | |“还没有Cookie”}
；
}
}
使用cookies导出默认值（测试）；

但是我不确定你如何能够在第一次加载时访问cookie而不进行解码

在对页面的任何负载进行解码和解析后，我都能够一致地读取cookie。但是没有解码，我总是出错

import React, { Component } from "react";
import { withCookies } from "react-cookie";

class Test extends Component {
  constructor(props) {
    super(props);
    const { cookies } = props;
    var _user_attributes = cookies.get("_user_attributes");
    if (_user_attributes) {
      _user_attributes = decodeURI(_user_attributes);
      const user_attributes = JSON.parse(_user_attributes);
      console.log(user_attributes);
      this.state = {
        name: user_attributes.user_givenName
      };
    }
    //if the cookie doesn't exist. added just for testing
    else {
      let temp = { user_id: "12345", user_givenName: "First" };
      temp = encodeURI(JSON.stringify(temp));
      cookies.set("_user_attributes", temp, { path: "/" });
    }
  }
  render() {
    return <p>{this.state?.name || "No Cookie yet"}</p>;
  }
}

export default withCookies(Test);