React Redux this.props总是返回undefined

Question

我现在在React，我正在做一些应用程序来学习，了解更多。 Aand现在我正在尝试将记录的用户信息添加到redux状态，但是当我尝试检查this.props.user的值时，我的应用程序始终返回undefined 。

我的reducer.js

import { LOG_USER } from '../actions/actions';

let initialState = {
  user: {
    userName: '',
    imageUrl: ''
  }
}

const userInfo = (state = initialState, action) => {
  switch (action.type) {
    case LOG_USER:
      return {
        ...state,
        user: action.user
      };
    default:
      return state;
  }
}

const reducers = userInfo;

export default reducers;

---

我的行动.js

export const LOG_USER = 'LOG_USER';

---

我的SignupGoogle.js组件：

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import firebase from '../../config/firebase';

import { connect } from 'react-redux'
import { LOG_USER } from '../../actions/actions';

import './SignupGoogle.css'

class SignupGoogle extends Component {
  constructor(props) {
    super(props);
  }
  signup() {
    let provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then(function(result) {
      console.log('---------------------- USER before login')
      console.log(this.props.user)
      let user = {
        userName: result.user.providerData[0].displayName,
        imageUrl: result.user.providerData[0].photoURL
      }
      console.log(user)
      this.props.logUser(user)
      console.log('---------------------- USER after login')
      console.log(this.props.user)
    }).catch((error) => {
      console.log(error.code)
      console.log(error.message)
      console.log(error.email)
    })
  }
  render() {
    return (
      <Button onClick={this.signup} variant="contained" className="btn-google">
        Sign Up with Google
        <img className='imgGoogle' alt={"google-logo"} src={require("../../assets/img/search.png")} />
      </Button>
    );
  }
}

const mapStateToProps = state => {
  return {
    user: state.user
  };
}

const mapDispatchToProps = dispatch => {
  return {
    logUser: (user) => dispatch({type: LOG_USER, user: user})
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(SignupGoogle);

---

还有我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux'
import { createStore } from 'redux';
import reducers from './reducers/reducers';

const store = createStore(reducers)

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

这是我使用Google firebase登录后在浏览器日志中可以获得的信息：

Answer 1

那是因为你的onClick处理程序方法没有绑定到组件的实例，修改你的构造函数，你的道具应该不再返回undefined ：

constructor(props) {
    super(props);

    this.signup = this.signup.bind(this);
}

或者，您也可以将onClick方法修改为如下所示：

<Button onClick={() => this.signup()} variant="contained" className="btn-google">

或者将onClick处理程序方法转换为箭头函数 ：

signup = () => {
    // ...
}
...
<Button onClick={this.signup} variant="contained" className="btn-google">

但是使用bind的第一个选项是首选。

有关事件处理的更多信息，请参阅文档 。

编辑：

我错过了涉及的另一个回调函数。 您正在访问this.props从另一个函数内signInWithPopup -callback。 将您的回调更改为箭头函数，该函数应保留signup方法的上下文并修复您的问题：

firebase.auth().signInWithPopup(provider).then(result => {
    // ...
}).catch(error => {
    // ...
});

Answer 2

这完全取决于背景。 由于您的signup功能绑定到onclick事件，因此this上下文是<button> 。

您可以在构造函数中设置this上下文：

constructor(props) {
  super(props);

  this.signup = this.signup.bind(this);
}

或使用箭头语法：

signup = () => {

}

React文档对于事件绑定有一个很好的答案： https ： //reactjs.org/docs/handling-events.html

Answer 3

您的注册定义很好，但您可以将其包装在具有正确“this”值的箭头函数中。

的onClick = {（）=>注册（）}