react-cookie 不会将新 cookie 保存在 cookie 内部对象中，并且使用饼干包装器给我 props.cookies undefined

Question

嗨，我有以下问题：

1.第一个问题

当用户登录到应用程序时，将触发函数 async handlesubmitform（）。我正在尝试将令牌保存到cookie中（这只是临时解决方案...）调用方法 settokenCookies 。如果有我的cookie，我会在浏览器设置中检查cookie！刷新页面console.log(this.props.cookies)之后，将我的代码放在某个地方（例如渲染方法）给我cookie列表，其中不包含我的cookie。

import { Cookies, withCookies } from "react-cookie";
 class LoginPage extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };
  constructor(props) {
    super(props);
    this.handleSubmitForm = this.handleSubmitForm.bind(this);
    this.state = {
      token: props.cookies.get("token")
    };
  }
  setTokenInCookies(cookie, expires) {
    const { cookies } = this.props;
    const parseToDate = new Date(expires);
    cookies.set("token", cookie, { path: "/token", expires: parseToDate });
  }
  async handleSubmitForm(values) {
    const email = values.get("email");
    const password = values.get("password");
   
      const JSONLoginForm = JSON.stringify({ email, password });
      try {
        const response = await axios.post("/login", JSONLoginForm, config);
        console.log(response);
        const { data: { token: value, expiration: expires } } = response;
        this.setTokenInCookies(value, expires);
      } catch (error) {
        console.log("error", error);
      }
  }
  render() {
    return (
      <Panel>
        <LoginForm onSubmit={this.handleSubmitForm} />
        <Link to="/forgotten_password"> Forgot password </Link>
        <Link to="/signup">Sign Up</Link>
      </Panel>
    );
  }
}
function mapStateToProps() {
  return {};
}
function mapDispatchToProps() {
  return {};
}
const withCookieLoginPage = withCookies(LoginPage);
export default connect(mapStateToProps, mapDispatchToProps)(withCookieLoginPage);

2。第二个问题我想访问不同组件中的cookie，但console.log(this.props.cookies)给我不确定的。

import React, { Component } from "react";
import styled, { ThemeProvider } from "styled-components";
import { Route } from "react-router-dom";
import { CookiesProvider, withCookies, Cookies } from "react-cookie";
import theme from "./themes/default";
import {instanceOf } from "prop-types";
import LoginPage from "./containers/LoginPage";
import ForgotPasswordPage from "./containers/ForgotPasswordPage";
import RegistrationPage from "./containers/RegistrationPage";
import WelcomePage from "./containers/WelcomePage";
const Wrapper = styled.div`
  display: flex;
  justify-content: center;
`;
class App extends Component {
  constructor(props) {
    super(props);
  }
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };
  render() {
    console.log(this.props.cookies);
    return (
      <CookiesProvider>
        <ThemeProvider theme={theme}>
          <Wrapper>
            <Route exact path="/" component={LoginPage} />
            <Route path="/signup" component={RegistrationPage} />
            <Route path="/forgotten_password" component={ForgotPasswordPage} />
            <Route path="/logged" component={WelcomePage} />
          </Wrapper>
        </ThemeProvider>
      </CookiesProvider>
    );
  }
}
export default withCookies(App);

Answer 1

几件事：

• 您只需要在应用中导入cookiesProvider。
• 如果您在应用程序中使用cookies（）导入的原因是打印cookie，则更好的方法是安装插件并直接从浏览器进行检查。
• log（）呼叫的放置在render（）中是不正确的，因为您在log（）呼叫之后返回cookiesProvider（一起）组件（s）。
• 最后，我建议仅使用 PATH 属性设置的cookies.set（）调用，以确保它有效（我实际上我自己遇到了这个问题）。

希望这会有所帮助。