componentWillReceiveProps（）未在子組件中執行？

您好我有兩個反應成分parent和child兩者都被連接到reduxstore以相同的對象和對象從服務器asynchronouslycomponentWillReceiveProps（）未在子組件中執行？

問題得到數據：在收到新道具父母的componentWillReceiveProps 得到執行，但孩子的componentWillReceiveProps未執行任何想法？

子組件

import React, {Component} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 


class Child extends Component{ 

    constructor(props) { 
    super(props); 
    this.handleUserClick = this.handleUserClick.bind(this) 

    } 

    handleUserClick(event){ 
    event.preventDefault(); 
    let userInfo = { 
     email: '[email protected]', 
     password: 'password', 
    }; 
    this.props.someAction(userInfo); // changes the store but on store change componentWillReceiveProps not executing 
    } 

    componentWillReceiveProps(nextProps){ 
    console.log(nextProps) 
    } 


render(){ 
    return (
     <div><form onSubmit={this.handleUserClick}></form></div> 
) 
    } 
} 

function matchDispatchToProps(dispatch) { 
    return bindActionCreators(
    { someAction: someAction}, dispatch) 
} 

function mapStateToProps (state){ 
    return { 
    dummyState: state.dummyState 
    }; 
} 

export default connect(mapStateToProps, matchDispatchToProps)(Child);

當我點擊handleUserClick是得到執行，但對從服務器childcomponentWillReceiveProps接收數據不被執行，但parentcomponentWillReceiveProps正在執行

我父組件

import React from 'react'; 
import { connect } from 'react-redux'; 
import {bindActionCreators} from 'redux'; 

class Parent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {parentState: 0} 
    } 


    componentDidMount() { 
    this.props.someAction(); // same action called in child component 
    } 

componentWillReceiveProps(nextProps){ 
    // it gets executed and call child render function 
    if(nextProps.something === true){ 
     this.setState({parentState: 1 }) 
    } 
    if(nextProps.something === false){ 
     this.setState({parentState: -1}) 
    } 

    } 


    render() { 

    if(this.state.parentState == -1){ 
     return(
     <Child/> 
     ) 
    } 
    else{ 
     return(null) 
    } 
    } 
} 



function matchDispatchToProps(dispatch) { 
    return bindActionCreators(
    { someAction: someAction}, dispatch) //same action in child component called 
} 



function mapStateToProps (state){ 
    return { 
    dummyState: state.dummyState // //same state in child component called 
    }; 
} 

export default connect(mapStateToProps, matchDispatchToProps)(Parent);

來源

2017-08-14 ashwintastic

如果這是孩子第一次呈現（您將renderChild設置爲true），則不調用componentWillReceiveProps（這是用於更新）。您應該查看componentWillMount。

如果您選擇renderChild狀態爲true已經是true，則不會發生任何情況。

來源

2017-08-14 13:30:38

已添加最新代碼 – ashwintastic

嘗試在子中使用'componentWillMount'。 –

我需要使用setState並使用'componentWillMount'不會調用渲染 – ashwintastic

這可能是有幾個原因

你減速器不能更新和狀態是遺體相同。
您的reducer正在更新狀態，但它的確切值相同，因此組件的父組件和子組件不會被重新呈現。
如果您沒有將更改的道具傳遞給子組件，並且您依靠redux進行渲染，則可能是您錯誤地更新了正在更新的狀態屬性的名稱。

如果你提供了更多的src代碼，比如你的動作創建者，reducer和更多源代碼，它將更容易調試。

來源

2017-08-14 13:40:43

已更新代碼 – ashwintastic

查看父容器，它看起來像子組件在某個時刻正在被卸載。可能是由於邏輯，子組件被卸載然後再次掛載，這就是爲什麼你沒有看到componentWillReceiveProps被觸發的原因。嘗試向您的子組件添加componentWillUnmount（）{console.log（「Child is unmounted」）;}並查看其被調用的頻率。這可能是你的問題 –

componentWillReceiveProps（）未在子組件中執行？

回答

相關問題