React使用react-cookie实现恒定将mySpecialCookie设为true的实现咨询

1. 依赖安装 #

执行npm install react-cookie完成依赖安装即可。

2. 入口文件index.js配置 #

不需要在index.js和App.js同时引入所有react-cookie相关模块，仅需在index.js导入CookiesProvider，包裹在App组件外层为全组件树提供Cookie操作上下文，你推测的包裹结构正确。
修正后的index.js完整代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { CookiesProvider } from "react-cookie";
import configureStore from './store/configureStore';
import getMiddlewares from './middlewares';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';

const storeConfig = configureStore(getMiddlewares());

ReactDOM.render(
  <storeConfig.Provider store={storeConfig.store}>
    <CookiesProvider>
      <App />
    </CookiesProvider>
  </storeConfig.Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

注：CookiesProvider与Redux Provider的嵌套顺序可互换，只要App组件处于CookiesProvider内部即可正常使用相关Hook。

3. App.js逻辑修正与实现 #

现有代码存在两处核心错误：

• useCookies入参应为需要操作的Cookie键名数组，而非布尔值true
• 需在组件挂载阶段调用set方法直接覆盖Cookie值，无需绑定任何页面交互
  修正后的App.js相关代码：

import React, { useEffect } from 'react';
import { useCookies } from 'react-cookie';
// 其他原有导入保持不变

const App = () => {
  // 原有Redux、路由、字典获取等逻辑保持不变
  const dispatch = useDispatch();

  // 修正useCookies入参，传入目标Cookie的键名
  const [cookies, setCookie] = useCookies(['mySpecialCookie']);

  useEffect(() => {
    dispatch(fetchDictionary(getLanguageCode()));
    // 固定设置mySpecialCookie为true，配置参数保证全站可访问、长期有效
    setCookie('mySpecialCookie', true, {
      path: '/', // 全路径可读取，避免仅当前路径可读
      maxAge: 60 * 60 * 24 * 365, // 有效期1年，可按需调整
      // 若需仅HTTPS环境生效可添加secure: true，根据业务场景配置
    });
  }, [dispatch, setCookie]);

  // 原有return的JSX逻辑保持不变
};

export default App;

补充说明 #

• 若需防止其他逻辑意外修改该Cookie，可额外添加对cookies.mySpecialCookie的监听，值不等于true时立即重置即可，无需绑定交互。
• 所有层级的子组件均可直接通过useCookies读取、修改该Cookie，无需额外引入Provider。

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