reactjs - 如何使用 react-cookie 在 react js 中获取 cookie？

Question

react-cookie 文档有这个例子

import React, { Component } from 'react';
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';
import NameForm from './NameForm';
class App extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };

  componentWillMount() {
    const { cookies } = this.props;

    this.state = {
      name: cookies.get('name') || 'Ben'
    };
  }

  handleNameChange(name) {
    const { cookies } = this.props;

    cookies.set('name', name, { path: '/' });
    this.setState({ name });
  }

我可以在不使用 componentWillMount 的情况下使用 cookies.get 吗？

Answer 1

那里有一点错过使用生命周期钩子。

您应该为state类构造函数赋予初始值。

例如

class Example extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      name: this.props.cookies.get('name') || 'Ben',
    }
  }
...

或者如果你只使用更新的 ES7 语法

class Example extends React.Component {
    state = {
      name: this.props.cookies.get('name') || 'Ben',
    }
...

constructor-下例不需要函数

componentWillMountlife-cycle 在即将发布的 React 版本中也将被弃用，因此我建议避免使用它。

相应地替换它

static getDerivedStateFromProps(nextProps, prevState){
   return {username: nextProps.username}
}

看到这里的区别，我们返回正常Object，然后将其传递给组件状态。所以在这里username会被传递给state.