为什么我得到，，无法读取未定义的属性“加载””

Question

我已经像这样在我的项目中定义了 cookie。 从 'react-cookie' 导入 cookie。所以这意味着我已经定义了 cookie，所以我不应该收到那个错误，但我会得到它。如果有人认为需要它，我会分享我的代码。

编辑 我只在这里添加了一半的代码，因为我必须使用完整的代码添加更多细节而且我不知道要添加什么。完整代码可以在这里找到https://pastebin.com/APTdX879

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import Block from "./Block"
    import Add from './Add'
    import cookie from 'react-cookie'

    class App extends Component {

      constructor(props){
        super(props)
        this.state = {
          logedin:  cookie.load("logedin")
        }
      }

      submit(){

        fetch("/newaccount")
        .then(res=>res.json())
        .then(data=>{
          console.log(data)
          console.log(document.getElementById('username').value)
          let arr = data.filter(event=>{

            return (event.username==document.getElementById('username').value&&event.password==document.getElementById('password').value)
          })
          console.log(arr.length)
          console.log(arr)
          if(arr.length==1){
            this.setState({logedin:true})
          }
          else{
            alert("wrong useranme or password")
          }
        })
      }

      componentDidMount(){
        fetch("/api")
        .then(response=>response.json())
        .then(data=> this.setState({data: data}))
        .catch(error=>console.log(error+' 1'))
      }
      componentWillMount() {

    }

      render() {
        if(!this.state.logedin){
          return (
            <div>
            <input id="username"/>
            <input id='password' type="password"/>
            <button onClick={this.submit.bind(this)}>Submit</button>
            </div>
            )
        }

        if(!this.state.data){
        return <p>loading</p>
      }
        return (

          <div>
          <hr/>
          <Add/>
          {
            this.state.data.map((data,i)=>{
            return(
              <div key={i+"a"}>
              <Block name={data.username} img={data.img} date={data.date} text={data.text} likes={data.likes} comments={data.comments} key={i} id={data._id}></Block>
            <br key={i+"b"}/>
            </div>
            )
          })
        }
          </div>

*这里的第二次编辑是错误http://prntscr.com/gghb5p的截图。

Answer 1

先尝试注入：

import { withCookies } from 'react-cookie';

export default withCookies(App);

或

App = withCookies(App);

然后在你的构造函数中：

    this.state = {
      logedin:  props.cookies.get("logedin")
    }

编辑：react-cookie 的文档中没有加载方法，我认为您需要

logedin:  props.cookies.get("logedin")

Answer 2

根据https://www.npmjs.com/package/react-cookie 的 react-cookie 文档，您应该像这样导入它：

import { CookiesProvider, withCookies, Cookies } from 'react-cookie';

然后在构造函数中获取 cookie 将不起作用，您需要在 componentWillMount() 方法中这样做：

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

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