我如何使用react-cookies设置具有字段的对象的cookie

如何解决我如何使用react-cookies设置具有字段的对象的cookie

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

{
"accounts": [
{
  "accountid": "stuff","accountName": "moreStuff","anotherField": "someMoreStuff"
},{
  "accountid": "stuff","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的链接。 感谢您的帮助，如果我做的愚蠢，请随时告诉我。

解决方法

您正确地做到了。我在本地运行，没有问题。似乎codeandbox不允许将您的Cookie存储在沙箱中（可能是出于安全原因）。

,

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