Question

我只有一个简单的登录...现在我想得到新返回的用户的值，你可以在我的mapStateToProps函数中看到.....但我无法比较它，因为componentWillReceieveProps（）不是甚至开火:(我做错了什么？

我的组件登录：

＆＃13;

    class LoginForm extends Component {
    
    	constructor(props) {
    		super(props);
    		this.state = {
    			email: '',
    			password: ''
    		};
    	}
    
    	onEmailChange(e) {
    		this.setState({ email: e.target.value })
    	}
    
    	onPasswordChange(e) {
    		this.setState({ password: e.target.value })
    	}
    
    	onLoginButtonClick() {
    		const { email, password } = this.state;
    		this.props.loginUser(email, password);
  
    	}
    
    	componentWillReceiveProps(nextProps) {
    		console.log(nextProps)
    	}
    
    	
    	render() {
    		return (
    			<div className="row center-xs login">
    				<div className="col-md-4 col-sm-6 col-xs-8 frame">
    
    				<div className="pt-card pt-elevation-1 start-xs formMargin">
    					<center>
    						<h3>User Login</h3>
    					</center>
    					<input className="pt-input input"
    					 type="text" 
    					 placeholder="Email" 
    					 dir="auto"
    					 onChange={e => this.onEmailChange(e)} />
    					<input className="pt-input input"
    					 type="password" 
    					 placeholder="Password" 
    					 dir="auto"
    					 onChange={e => this.onPasswordChange(e)} />
    					<Blueprint.Button
    					 className="pt-button pt-intent-primary input pt-large"
    					 onClick={() => this.onLoginButtonClick()}
    					 loading={this.props.loading}
    					 >
    						Login
    					</Blueprint.Button>
    				</div>
    				</div>
    			</div>
    		);
    	}
    }
    
    const mapStateToProps = (state) => {
    	return {
    		user: state.userAuth
    	};
    };
    
    
    export default connect(mapStateToProps, { loginUser })(LoginForm)

＆＃13;

和App连接到redux：

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import store from './reducers/';
import LoginForm from './containers/LoginForm'

class App extends Component {
  render() {
    return (
      <Provider store={createStore(store, {}, applyMiddleware(thunk))}>
        <Router>
          <div>
            <Route exact path="/" component={LoginForm} />
          </div>
        </Router>
      </Provider>
    );
  }
}

export default App;

减速器：

const INITIAL_STATE = {
    loading: false,
    user: [],
    message: '',
    error: false
};

export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case 'LOGIN':
            return { ...state, loading: true }
        case 'LOGIN_SUCCESS':
            return { ...state, loading: false, user: action.payload, error: false, message: '' }
        case 'LOGIN_ERROR':
            return { ...state, loading: false, error: true, message: action.payload }
        default:
            return state
    }
};

和行动创作者：

import axios from 'axios';

const API_URL = 'http://localhost:8000/';

export const loginUser = (email, password) => {
    return (dispatch) => {
        dispatch({ type: 'LOGIN_USER' })

        axios.post(`${API_URL}v1/login`, { email, password })
            .then( user => {
                console.lof(user)
                dispatch({ type: 'LOGIN_USER_SUCCESS', payload: user.data.user })
            })
            .catch( error => {
                dispatch({ type: 'LOGIN_USER_ERROR', payload: error })
            })
    };
};

Answer 1

仅当您从父

传递属性时才会触发

componentWillReceiveProps

Answer 2

您的reducer中没有名为userAuth的状态。

为什么componentWillReceiveProps（nextProps）没有记录/触发

2 个答案: