0

我想将 cookie 设置为始终为真，而不是在发生某事或单击某事时。

所以有几个关于这个的教程和文章。就我而言，它应该类似于：'mySpecialCookie = true'。

安装包：npm install react-cookie

index.js 和 App.js 都需要导入吗？

我的 index.js 看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
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}>
    <App />
  </storeConfig.Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

所以我假设在 ReactDOM 里面应该改成这个？

import { CookiesProvider } from "react-cookie";
...
ReactDOM.render(
  <storeConfig.Provider store={storeConfig.store}>
    <CookiesProvider>
      <App />
    </CookiesProvider>
  </storeConfig.Provider>,
  document.getElementById('root')
);

在 App.js 中，我使用 useCookies 钩子添加了它，但不知道在哪里使用它：

import React, { useEffect } from 'react';
import { useCookies } from 'react-cookie'; //// <---   added it here 
import { IntlProvider } from 'react-intl';
import { useSelector, shallowEqual, useDispatch } from 'react-redux';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Main from './Main';
import OrderDetails from './OrderDetails';
import { fetchDictionary } from '../actions/dictionary';
import { getLanguageCode } from '../utils';
import { HOME_PAGE, ORDER_DETAILS } from '../constants/routes';

const App = () => {
  const dictionary = useSelector((state) => state.dictionary, shallowEqual);
  const routes = [
    { path: HOME_PAGE, component: Main },
    { path: `${ORDER_DETAILS}/:id`, component: OrderDetails }
  ];
  const dispatch = useDispatch();

  const [mySpecialCookie, setMySpecialCookie] = useCookies(true);  //// <---   added it here 

  useEffect(() => {
    dispatch(fetchDictionary(getLanguageCode()));
  }, [dispatch]);

  return (
    <IntlProvider
      key={dictionary.locale}
      locale={dictionary.locale}
      messages={dictionary.messages}>
      <Router>
        {routes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            exact
            component={route.component}
          />
        ))}
      </Router>
    </IntlProvider>
  );
};

export default App;

有什么建议么？

4

1 回答 1

0

我找到了一种更短的方法来使用js-cookie.

在 App.js 文件中：

...
import Cookies from 'js-cookie';
...

const App = () => {
   ...
   Cookies.set('mySpecialCookie', true);
   ...
}
于 2021-05-05T12:27:39.453 回答