如何使用 react-cookies 设置带有字段的对象的 cookie答案

【问题标题】：How can i set a cookie of an object with fields using react-cookies如何使用 react-cookies 设置带有字段的对象的 cookie
【发布时间】：2020-08-28 13:58:03
【问题描述】：

我正在尝试根据我从 json 加载的数据设置 cookie 的值（将来自功能应用程序中的 axios 调用）。这是codesandbox 的链接。如果你想看这里的代码是data.JSON：

{
"accounts": [
{
  "accountid": "stuff",
  "accountName": "moreStuff",
  "anotherField": "someMoreStuff"
},
{
  "accountid": "stuff",
  "accountName": "moreStuff",
  "anotherField": "someMoreStuff"
}]}

这是我的 index.js

const rootElement = document.getElementById("root");
ReactDOM.render(
 <React.StrictMode>
   <CookiesProvider>
     <App />
   </CookiesProvider>
 </React.StrictMode>,
 rootElement
);

这是我在 app.js 中使用 cookie 的方式

         static propTypes = {
        cookies: instanceOf(Cookies).isRequired
      };
      constructor(props) {
        super(props);
        const { cookies } = props;
        this.state = {
          AccountData: cookies.get("AccountData") || ["Option1","Option2","Option3","Option4"]
        };
      }

      componentDidMount = () => {
        const { cookies } = this.props;
        console.log(AccountData);
        let tempAccountData = AccountData;
        cookies.set("AccountData", tempAccountData);
        console.log(cookies.getAll());
      };

      getCookieValueLater = () => {
        const { cookies } = this.props;
        console.log(cookies.getAll());
      };
      render() {
        return (
          <div className="App">
            <h1>Hello CodeSandbox</h1>
            <h2>Start editing to see some magic happen!</h2>
            <button onClick={() => this.getCookieValueLater()}>
              getCookieValueLater
            </button>
          </div>
        );
      }
    }

    export default withCookies(App);

我认为插入带有字段的对象是一个问题。这里又是指向codesandbox 的链接。感谢您的帮助，如果我在做一些愚蠢的事情，请随时告诉我。

【问题讨论】：

您在哪里设置 cookie。需要在某处调用 loke cookie.set() 吗？
我在 App.js 的 componentDidMount 中调用它
好的，然后让我检查一下
全屏试试，效果不错。 qojsl.csb.app。原因是编辑器右侧有 iframe。访问 cookie 必须有一些限制
哇，这很奇怪。我正在开发的应用程序中遇到同样的问题，我总是全屏使用它。我猜是时候进行更多调试了

标签： javascript reactjs react-cookie

【解决方案1】：

对于查看过我的代码但仍无法设置 cookie 的任何人，请确保您设置的代码最大为 4kb。 cookie 的最大大小为 4kb，如果您传递的数据太大，react-cookies 会阻止您设置 cookie。希望这对某人有所帮助。

【讨论】：

【解决方案2】：

你做得对。我在本地运行这个没有问题。似乎代码沙盒不允许在沙盒中存储您的 cookie（可能是出于安全原因）。

【讨论】：