调用get()时reactjs通用cookie包错误

Question

I have the following two components. They are in separate .js files.

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');
   }

}

The second component throws the following error:

TypeError: universal_cookie__WEBPACK_IMPORTED_MODULE_4__.default.get is not a function

How do I resolve it?

UPDATE: google oauth flow

Answer 1

I think the problem is that you are not calling new Cookie(); in the second block of code, hence the methods like get and set are not initialized.

You can try this approach where you call new every time you want to access the cookies.

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

Or you could create a "global" variable that you access from anywhere. Because you are accessing the globalCookie in separate files you would have to put the initializing code in a file that are called/imported before the files that contain your code that uses the globalCookie variable. But please be very careful using globals as they are a easy way to introduce hard to find bugs in to your code.

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');
   }
}

See github repo for docs: https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie

Answer 2

You have import cookie from 'universal-cookie' in your Comp2. Replace it with import Cookie from 'universal-cookie'

Answer 3

Firstly, var cookie = New Cookie(); will cause syntax errors.

Use var cookie = new Cookie(); as JavaScript keywords as key sensitive.

Secondly, you are inconsistent with your case-sensitivity again with your imports:

import Cookie from 'universal-cookie'

import cookie from 'universal-cookie'

These will cause confusion. Your going to want to refactor that to standardize across the components. Example just opt with the capital 'C':

import Cookie from 'universal-cookie'

Lastly, taking into consideration the case-sensitivity I have mentioned & as others have mentioned, you need to instantiate Cookie as it is a class . Here is how your components should look like:

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

Also, just FYI don't use Incognito for testing my sandbox