React单页应用中使用cookie.set函数报错的解决方法咨询

这个问题我之前踩过坑！根源在于你引入的cookie包是专门给Node.js环境设计的，它的API里根本没有set方法——这个包主要用来在后端解析或序列化Cookie字符串，不是给浏览器端直接操作Cookie用的，所以调用cookies.set才会报错。下面给你两个简单可行的修复方案：

方案一：用浏览器原生API直接操作Cookie #

不需要额外依赖，直接用document.cookie就能实现，只是需要手动把对象转成符合Cookie格式的字符串：

// 把用户信息转成JSON字符串并编码，避免特殊字符导致的问题
const userData = JSON.stringify({ id: user.id, token: response.data.token, email: this.state.email });
// 组装成Cookie格式的字符串，path=/确保全站都能访问到这个Cookie
const cookieStr = `user=${encodeURIComponent(userData)}; path=/`;
// 设置Cookie
document.cookie = cookieStr;

如果需要设置过期时间、域名等参数，直接在字符串后面拼接即可，比如; expires=${new Date(Date.now() + 7*24*60*60*1000).toUTCString()}就能让Cookie7天后过期。

方案二：用专门的浏览器端Cookie库（推荐） #

如果觉得原生API写起来繁琐，可以用js-cookie这个轻量库，它的用法和你原本写的几乎一致，非常省心：

1. 先安装依赖：

npm install js-cookie
# 或者用yarn安装
yarn add js-cookie

2. 修改你的引入代码：

import Cookies from 'js-cookie';

3. 然后直接复用你原来的代码就行：

Cookies.set("user", { id: user.id, token: response.data.token, email: this.state.email });

这个库还支持一键设置过期时间、路径、域名等参数，比如Cookies.set('user', userData, { expires: 7 })就表示让Cookie7天后过期，比原生API方便太多。

最后再补一句：你之前用的cookie包，核心方法是cookie.parse()（解析Cookie字符串）和cookie.serialize()（把对象转成Cookie字符串），一般在Node.js后端处理请求头里的Cookie时才会用到，浏览器端用它完全找错工具啦～

内容的提问来源于stack exchange，提问作者tryToRunThisCommand