调用get（）时reactjs universal-cookie包错误

Question

我有以下两个组成部分。它们位于单独的 .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

如何解决？

更新：google oauth 流程

Answer 1

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

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

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

或者您可以创建一个您可以从任何地方访问的“全局”变量。因为您在单独的文件中访问 globalCookie，所以您必须将初始化代码放在 called/imported 的文件中，该文件位于包含使用 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 文档库：https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie

Answer 2

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

Answer 3

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

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

其次，您的 case-sensitivity 再次与您的导入不一致：

import Cookie from 'universal-cookie'

import cookie from 'universal-cookie'

这些会引起混淆。您将想要重构它以跨组件标准化。例子只是选择大写 'C':

import Cookie from 'universal-cookie'

最后，考虑到我提到的 case-sensitivity 以及其他人提到的，您需要将 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'));
    }
    ...
}

代码沙盒：https://codesandbox.io/s/universal-cookie-react-components-8lc3m

此外，仅供参考，我不使用 Incognito 来测试我的沙箱

调用get（）时reactjs universal-cookie包错误

reactjs universal-cookie package error when calling get()

reactjs

cookies

get

typeerror

universal