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提供初始值。

e.g。

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 -function 在即将推出的React版本中，

componentWillMount生命周期也将被弃用，因此我建议不要使用它。

相应的替换

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

在这里看到不同之处，我们返回正常Object，然后将其传递给组件状态。所以在这里username将传递给state。

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

1 个答案: