调用get时reactjs通用cookie包错误

如何解决调用get时reactjs通用cookie包错误

我有以下两个组成部分。它们位于单独的.js文件中。

import Cookie from 'universal-cookie'
class Comp1{

   someFunction(){
      // Call google Oauth
      // get userinfo from Oauth response and set the token below
      var cookie = New Cookie();
      cookies.set('user',user,{ path: '/' })
      this.props.history.push('/Comp2')
      window.location.reload()
   }

}

-------------------------------------------- -------------

import cookie from 'universal-cookie'
class Comp2{

   anotherFunction(){
       var user = cookie.get('user');
   }

}

第二个组件引发以下错误：

TypeError: universal_cookie__WEBPACK_IMPORTED_MODULE_4__.default.get is not a function

我该如何解决？

更新：谷歌oauth流

解决方法

我认为问题在于您没有在第二个代码块中调用new Cookie();，因此未初始化诸如get和set之类的方法。

您可以尝试使用这种方法，每次要访问cookie时都调用new。

import Cookie from 'universal-cookie'
class Comp2 {
   anotherFunction(){
       var cookie = New Cookie();
       var user = cookie.get('user');
   }
}

或者您可以创建一个“全局”变量，您可以从任何地方访问它。 因为您要在单独的文件中访问globalCookie，所以必须将初始化代码放在一个调用/导入的文件中，该文件位于包含使用globalCookie变量的代码的文件之前。 但是请小心使用全局变量，因为它们是在代码中引入难以发现的错误的简便方法。

import Cookie from 'universal-cookie';
var globalCookie = New Cookie();

class Comp1{
   someFunction(){
      globalCookie.set('user',user,{ path: '/' })
   }
}
class Comp2{
   anotherFunction(){
       var user = globalCookie.get('user');
   }
}

有关文档，请参见github repo：https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie

,

您的Comp2中有import cookie from 'universal-cookie'。 将其替换为import Cookie from 'universal-cookie'

,

首先，var cookie = New Cookie();会导致语法错误。

使用var cookie = new Cookie();作为对关键字敏感的JavaScript关键字。

其次，您再次与导入的大小写不一致：

从“通用Cookie”导入Cookie

从“通用cookie”导入cookie

这些会引起混乱。您将要重构它，以在各个组件之间实现标准化。示例只是选择使用大写字母“ C”：

import Cookie from 'universal-cookie'

最后，考虑到我提到的大小写敏感度以及其他人提到的大小写敏感度，您需要将Cookie实例化为it is a class。这是您的组件的外观：

import Cookie from 'universal-cookie';

class Comp extends React.Component {
  ...
  someFunction() {
    var cookie = new Cookie();
    cookie.set('user',"somecookie",{ path: '/' })
  }
  ...
}

---

import Cookie from 'universal-cookie'

class Comp extends React.Component {
    ...
    someFunction() {
        var cookie = new Cookie();
        console.log(cookie.get('user'));
    }
    ...
}

---

CodeSandBox：https://codesandbox.io/s/universal-cookie-react-components-8lc3m

此外，仅供参考，我不会使用隐身测试来测试我的沙盒