父组件更改时更新子组件

Question

我对JS的反应有点陌生。我有两个问题。我来了

class Application extends React.Component {
  isBindEvents=false;



  componentWillMount(){
    let {dispatch} = this.props;

  dispatch(getCompanyInfo( "abcd.com", (res) => { // THIS IS A ACTION CALL
  

    this.props.user = res.data.user;       
    this.setState({name:res.data.user.name})

    this.forceUpdate()

  }))
}

 render(){


return ( <div className='react-wrapper'>
    <ABCD {...this.props} /> // THIS IS THE CHILD COMPONENT WHICH I WANT TO RE-RENDER WHEN THE PARENT COMPONENT CHANGES
    <div >
     
      <div id="body" >
        <div>
        <div >
          <div className="container-fluid">
            {this.props.posts}
          </div>
        </div>
        </div>
      </div>
    </div>
   
</div>)
  }
}

export default connect(mapStateToProps)(Application)

class ABCD extends React.Component {

 

  render() {

   

    let isShowUser = this.props.user 
      ? true
      : false;

    

    return (
      <div> Here is the user name {isShowUser? this.props.user.name: 'user not present'} </div>
    );
  }
}


export default connect(mapStateToProps)(ABCD);

现在我要做的是，当应用程序组件挂载时，我生成一个对后端服务器的ajax调用，当它返回时，它更新道具，并设置状态，这样子组件也会重新呈现，但子组件不会重新呈现。谁能告诉我出了什么问题。

问题2

The next question is related to react router I'm using react router for the routeing.This is how I'm using router 

module.exports = {
  path: '/',
  component: Application,
  
  indexRoute: require('./abcd'),
  childRoutes: [
    require('./componentTwo'),
    require('./componentOne'),
  ]
};

现在让我们假设我将进入组件二路由，它将呈现组件二，我在应用程序组件中生成一个ajax调用，根据ajax调用返回的数据，我在应用程序组件中设置了一些道具，我还希望组件二在应用程序中更改一些道具时重新呈现，有什么方法可以做到这一点吗

谢谢任何帮助都将不胜感激

Answer 1

this.props.user = res.data.user; 

你不能分配给道具。道具是从父级传递的。将用户设置为该状态，并将该状态传递给您的子组件，如下所示：

<ABCD {...this.props} user={this.state.user} />

在子组件中，您现在可以访问this.props.user。而且，那时也不需要this.forceUpdate（）。