父组件更改时更新子组件 [英] update child component when parent component changes

问题描述

我是React js的新手.我有两个问题.我去了

I'm kind of new to React js. I have two questions. Here I go

问题1

我想在更新(重新渲染)父组件时更新(重新渲染)子组件.经过一番谷歌搜索后，我发现当更改道具时，我们调用forceUpdate函数仅更新父组件，而不更新子组件.如果我想更新子组件，则需要使用setState函数并在状态中设置一些内容来更新子组件. 但是我面临的问题是，当我在父组件中设置状态时，子组件不会更新.不调用子级的render方法.有人可以告诉我我做错了什么吗?

I wanted to update(re-render) the child component when I update(re-render) the parent component. After some googling, I found out that when the props are changed and we call the forceUpdate function only the parent component is updated not the child component. If I wanted to update the child component I needed to needed to use setState function and set something in the state to update the child. But the problem that I'm facing is that when I set state in the parent component the child component is not updated. The render method of the child is not called. Can somebody please tell me what is it that I'm doing wrong?

Parent.jsx

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)

CHILD.JSX

CHILD.JSX

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调用，当它返回时，它将更新道具，并且我将状态设置为使子组件也重新呈现，但子组件组件未重新渲染.有人可以告诉我出什么事了吗.

Now what I'm doing is that when the application component is mounting I generate an ajax call to my backend server and when it return it updates the props and I set the state so that that child component is also rerendered but the child component is not re-rendering. Can somebody please tell me what's is going wrong.

问题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'),
  ]
};

现在让我们假设我要转到组件2的路由，该路由将渲染组件2，然后在应用程序组件中生成ajax调用，并根据ajax调用返回的数据在应用程序组件中设置一些道具，还希望组件2在应用程序中发生更改后立即重新渲染组件2，

Now let's suppose I'm going to component Two route which will render component Two and I generate a ajax call in application component and on the basis of the data returned by the ajax call I set some props in the application component and I also want the component Two to re-render as soon some props are changed in application is there any way to do that

感谢您的帮助

推荐答案

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

您无法分配道具.道具是从父母那里传递的.将用户设置为状态，然后将状态传递给您的子组件，如下所示:

You can't assign to props. Props are passed from a parent. Set the user in the state and pass the state to your child component like so:

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

您现在可以在子组件中访问this.props.user.另外，也不需要this.forceUpdate().

In your child component you will now have access to this.props.user. Also the this.forceUpdate() will not be needed then.

这篇关于父组件更改时更新子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！