react-cookie不会在cookie内部对象中保存新的cookie，withCookie包装器给了我未定义的props.cookies

Question

嗨，我有以下问题：

1.第一个问题

当用户登录到应用程序时，就触发了异步handleSubmitForm()函数。我正在尝试将令牌保存到cookie中(这只是暂时的解决方案.)调用方法setTokenInCookies.我在浏览器的设置中检查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.第二个问题，，我想访问不同组件中的cookies，但是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。
• 如果您在App中导入withCookies()的原因是为了打印cookies，那么更好的方法是安装一个插件并从浏览器中直接检查它们。
• log()调用的位置在render()中是不正确的，因为您在log()调用之后返回CookiesProvider (和其余的)组件。
• 最后，我建议先使用path属性设置cookies.set()调用，以确保其工作正常(实际上，我自己也遇到了这个问题)。

希望这能有所帮助。