Javascript react/redux无法读取属性'；设置当前值'；未定义的_Javascript_Reactjs_Redux_React Redux

Javascript react/redux无法读取属性'；设置当前值'；未定义的

javascript reactjs redux

Javascript react/redux无法读取属性'；设置当前值'；未定义的,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,因此，我正在为我的项目准备redux，结果陷入了困境。一切似乎都是正确的，因为redux devtools显示状态当我试图通过这个.props.function\u名称调用组件中的函数时，就会出现问题我在.then（）中调用它，因为我是在axios返回令牌时调用它的，我知道这个范围在那时候会改变，但我在那时候使用了arrow函数，所以问题似乎不存在还尝试从另一个函数调用this.props.setcurrent，但失败 _此2未定义我的代码： Signup.js import {set

因此，我正在为我的项目准备redux，结果陷入了困境。一切似乎都是正确的，因为redux devtools显示状态

当我试图通过这个.props.function\u名称调用组件中的函数时，就会出现问题

我在.then（）中调用它，因为我是在axios返回令牌时调用它的，我知道这个范围在那时候会改变，但我在那时候使用了arrow函数，所以问题似乎不存在

还尝试从另一个函数调用this.props.setcurrent，但失败 _此2未定义我的代码：

Signup.js

import {setCurrent} from '../actions/authActions'

class SignUp extends Component {
  constructor(props) {
    super(props);
  }
  responseGoogle(response) {
    console.log('google', response);
    const access_token = response.Zi.access_token;
    axios
      .post('http://localhost:3001/users/oauth/google', {
        access_token
      })
      .then((response) =>{
        console.log('google', response);
        const decoded = jwt_decode(response.data.token);
        this.props.setCurrent(decoded);
        console.log(decoded);
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  render() {
    return (
          <GoogleLogin
            clientId="890644813294-bvuq6cf7lsilohneqvov28oi60sfdmig.apps.googleusercontent.com"
            buttonText="Login"
            onSuccess={this.responseGoogle}
            onFailure={this.responseGoogle}
          />
       )
  }
}

export default connect(null, { setCurrent })(SignUp);

authReducer.js

import { TEST_DISPATCH } from '../actions/types';
const initialState = {
  isAuthenticated: false,
  user: {}
}
export default function(state = initialState, action) {
  switch(action.type) {
    case TEST_DISPATCH:
      return {
        ...state,
        user: action.payload
      };
    default:
      return state;
  }
}

Auth/index.js

import { combineReducers } from 'redux';
import authReducer from './authReducer';

export default combineReducers({
  auth: authReducer
});

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
   // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from '../store';
import LogIn from './LogIn';
import SignUp from './SignUp';


class App extends Component {
  render() {
    return(
      <Provider store={ store }>
      <div>
      <h1>SignUp!</h1>
      <SignUp />
    </div>
    </Provider>
    )
  }
}
export default App;

import React，{Component}来自'React'；
从'react redux'导入{Provider}；
从“../store”导入存储；
从“./LogIn”导入登录名；
从“./SignUp”导入注册；
类应用程序扩展组件{
render（）{
返回(
报名！
)
}
}
导出默认应用程序；

完整代码：我也在用babel和webpack

我知道这个范围在那个时候发生了变化，但我使用了箭头函数，所以问题似乎不存在

这仍然是一个范围问题。ResponseLoge方法的作用域已确定。所以你需要像这样“自动绑定”：

responsegogle=（response）=>{/*您的代码*/}

或在注册组件的渲染方法中：

<GoogleLogin
    onSuccess={response => this.responseGoogle(response)}
    onFailure={response => this.responseGoogle(response)}
/>

this.responseogle（response）}
onFailure={response=>this.responsegogle（response）}
/>

我知道这个范围在那个时候发生了变化，但我使用了箭头函数，所以问题似乎不存在

这仍然是一个范围问题。ResponseLoge方法的作用域已确定。所以你需要像这样“自动绑定”：

responsegogle=（response）=>{/*您的代码*/}

或在注册组件的渲染方法中：

<GoogleLogin
    onSuccess={response => this.responseGoogle(response)}
    onFailure={response => this.responseGoogle(response)}
/>

this.responseogle（response）}
onFailure={response=>this.responsegogle（response）}
/>

您对

这篇

引用了不正确的上下文的想法是正确的。查看这段代码片段，我添加了一些注释，可能有助于澄清

class SignUp extends Component {
  constructor(props) {
    super(props);
  }

  responseGoogle(response) {
    // "this" does not refer to the class instance here when invoked by
    // the click handler (it is undefined)

    const access_token = response.Zi.access_token;
    axios
      .post('http://localhost:3001/users/oauth/google', {
        access_token
      })
      .then((response) => {
        // Because this is a lambda function, "this" is the same lexical scope
        // as the outer function - but the outer function "this" is undefined
        // *not* the instance of the class (see above)     

        const decoded = jwt_decode(response.data.token);
        this.props.setCurrent(decoded);
        console.log(decoded);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  render() {
    return (
          <GoogleLogin
            clientId="890644813294-bvuq6cf7lsilohneqvov28oi60sfdmig.apps.googleusercontent.com"
            buttonText="Login"
            onSuccess={this.responseGoogle}
            onFailure={this.responseGoogle}
          />
       )
  }
}

JavaScript的bind方法存在于函数上，并返回一个与原始函数相同的新函数，除了它的上下文（它的“this”）设置为传递给

bind

的内容之外。因此我们创建了一个新方法，绑定到构造函数中的任何“this”。在构造函数中，“this”是类实例，因此在click处理程序中也是如此

使用lambda函数而不是类方法

class SignUp extends Component {
    responseGoogle = (response) => {
        const access_token = response.Zi.access_token;
        axios
          .post('http://localhost:3001/users/oauth/google', {
            access_token
          })
          .then((response) =>{
            console.log('google', response);
            const decoded = jwt_decode(response.data.token);
            this.props.setCurrent(decoded);
            console.log(decoded);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
      render() {
        return (
              <GoogleLogin
                clientId="890644813294-bvuq6cf7lsilohneqvov28oi60sfdmig.apps.googleusercontent.com"
                buttonText="Login"
                onSuccess={this.responseGoogle}
                onFailure={this.responseGoogle}
              />
           )
      }
  }

类注册扩展组件{
响应日志=（响应）=>{
const access_token=response.Zi.access_token；
axios
.post（'http://localhost:3001/users/oauth/google', {
访问令牌
})
。然后（（响应）=>{
log（'google'，response）；
const decoded=jwt_decode（response.data.token）；
此.props.setCurrent（已解码）；
控制台日志（已解码）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
返回(
)
}
}

这与lambda函数回调到

的原因相同。然后

通过维护外部“This”来工作。这种方法的唯一缺点是它不是JS语言的真正组成部分，因此您需要对其进行传输才能正常工作（但您已经在使用babel/webpack，所以这不是问题）

您关于

这个引用错误上下文的想法是正确的。查看这段代码片段，我添加了一些注释，可能有助于澄清
class SignUp extends Component {
  constructor(props) {
    super(props);
  }

  responseGoogle(response) {
    // "this" does not refer to the class instance here when invoked by
    // the click handler (it is undefined)

    const access_token = response.Zi.access_token;
    axios
      .post('http://localhost:3001/users/oauth/google', {
        access_token
      })
      .then((response) => {
        // Because this is a lambda function, "this" is the same lexical scope
        // as the outer function - but the outer function "this" is undefined
        // *not* the instance of the class (see above)     

        const decoded = jwt_decode(response.data.token);
        this.props.setCurrent(decoded);
        console.log(decoded);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  render() {
    return (
          <GoogleLogin
            clientId="890644813294-bvuq6cf7lsilohneqvov28oi60sfdmig.apps.googleusercontent.com"
            buttonText="Login"
            onSuccess={this.responseGoogle}
            onFailure={this.responseGoogle}
          />
       )
  }
}

JavaScript的bind方法存在于函数上，并返回一个与原始函数相同的新函数，除了它的上下文（它的“this”）设置为传递给bind
的内容之外。因此我们创建了一个新方法，绑定到构造函数中的任何“this”。在构造函数中，“this”是类实例，因此在click处理程序中也是如此
使用lambda函数而不是类方法
class SignUp extends Component {
    responseGoogle = (response) => {
        const access_token = response.Zi.access_token;
        axios
          .post('http://localhost:3001/users/oauth/google', {
            access_token
          })
          .then((response) =>{
            console.log('google', response);
            const decoded = jwt_decode(response.data.token);
            this.props.setCurrent(decoded);
            console.log(decoded);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
      render() {
        return (
              <GoogleLogin
                clientId="890644813294-bvuq6cf7lsilohneqvov28oi60sfdmig.apps.googleusercontent.com"
                buttonText="Login"
                onSuccess={this.responseGoogle}
                onFailure={this.responseGoogle}
              />
           )
      }
  }

类注册扩展组件{
响应日志=（响应）=>{
const access_token=response.Zi.access_token；
axios
.post（'http://localhost:3001/users/oauth/google', {
访问令牌
})
。然后（（响应）=>{
log（'google'，response）；
const decoded=jwt_decode（response.data.token）；
此.props.setCurrent（已解码）；
控制台日志（已解码）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
返回(
)
}
}

这与lambda函数回调到的原因相同。然后
通过维护外部“This”来工作。这种方法的唯一缺点是它不是JS语言的真正组成部分，因此您需要进行传输才能使其工作（但您已经在使用babel/webpack，所以这不是问题）
很好的解释-欣赏它很好的解释-欣赏它我想指出他也可以像这样绑定构造函数：this.responsegogle=this.responsegogle.bind（this）
.想指出他也可以像这样绑定构造函数：this.responseGoogle=this.responseGoogle.bind（this）。