Question

我已经在我的项目中定义了这样的cookie。从＆＃39; react-cookie＆＃39;导入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

根据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'
    };
  }

Answer 2

首先尝试注入它：

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")

我为什么会这样，不能阅读财产＆＃39;加载＆＃39;未定义＆＃34;

2 个答案: