javascript - 在 React/NextJS 中使用 cookie-react 解析 JSON cookie 时的奇怪行为

Question

我有一个名为“_user_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: Unexpected token u in JSON at position 0”。
我完全不明白为什么会这样。如果有人有任何建议，我将不胜感激。我的页面的完整代码如下。

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

class App extends Component {
  constructor(props) {
    super(props)
    const { cookies } = props;
    var _user_attributes = cookies.get('_user_attributes')
    const user_attributes = JSON.parse(_user_attributes)
    console.log(_user_attributes)
    this.state = {
      name: user_attributes.name
    }
  }
  render() {
    return (
      <p>{this.state.name}</p>
    );
  }
}

export default withCookies(App);

Answer 1

您正在对 JSON 进行编码，同时存储在 cookie 中，但在读取它时，cookie 值直接馈送到 JSON.parse无需解码。由于 JSON 解析器无法解析编码值，因此会抛出错误。
这是用于 cookie 检索的代码框 - https://codesandbox.io/s/silly-shtern-2i4dc?file=/src/App.js

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

但我不确定您如何能够在首次加载时访问 cookie 而无需解码。
在对页面的任何负载进行解码和解析后，我能够始终如一地读取 cookie。但是如果没有解码，我总是会出错。