2017-08-31 50 views
4

为什么我的componentWillReceiveProps不能在我的react-native上运行,我使用react-navigation和redux。我执行按钮登录reducer我使用immutable。在商店已经更新,但componentWillReceiveProps没有运行只是跳转到componentWillUpdate和DidUpdate只有componentwillreceiveprops not called on react-native and redux

import React, { Component } from 'react' 

class Main extends Component{ 
    constructor(props){ 
    super(props) 
    this.state = { 
    active : '', 
    username: '', 
    password: '' 
    } 
} 

componentWillReceiveProps(newProps) { 
console.log(newProps.load(), 'Component WILL RECIEVE PROPS!') 
} 

componentWillUpdate(nextProps, nextState) { 
console.log(nextProps, nextState, 'Component WILL UPDATE!'); 
} 

componentDidUpdate(prevProps, prevState) { 
console.log(prevProps,'Component DID UPDATE!') 
} 

handleButtonAction(actions){ 
let user = this.state.username 
let pass = this.state.password 
if(actions === 'login'){ 
    this.props.login(user, pass) 
} 
} 

render(){ 
    const {navigation} = this.props; 
return(
      <Button block onPress={()=>this.handleButtonAction('login')} style= 
    {{marginLeft: 10, marginRight: 10}}> 
      <Text>Login</Text> 
      </Button> 
    )} 

const mapStateToProps = state =>({ 
    token: state.token 
}) 

const mapDispatchToProps = dispatch => ({ 
login: (user, pass)=> dispatch({type:"LOGIN", payload:'testing'}), 
}) 

export default connect(mapStateToProps, mapDispatchToProps)(Main) 

在减速,我已经用一成不变的,但为什么要在这个更新,仍然receiveProps上不叫组件

const listProduct = (oldstate, value)=>{ 
console.log(oldstate); 
let newState = {...oldstate, data: value.data.data} 
console.log(newState); 
return newState 
} 

const login = (oldstate, value)=>{ 
let newState = {...oldstate, token: value} 
return newState 
} 

const initialState = {} 

const product = (state=initialState, actions)=>{ 
switch (actions.type) { 
case "GET_PRODUCK": return listProduct(state, actions.payload); 
case "LOGIN": return login(state, actions.payload); 
default: return state 
}} 

export default product 

回答

0

componentWillReceiveProps只会在道具发生变化时以及不是初始渲染时调用。

如果您接收到与以前完全相同的道具,则不会调用componentWillReceiveProps。

我们通过更新状态中的新值来触发它。

所以在这里,你需要派遣功能login

this.props.login(user, pass)这不会打电话给你的减速功能

派遣SYNTEXT就像this.props.dispatch(xyz.login(user, pass)}那么它将被称为减速功能的登录和更新状态