子组件reactjs的动态道具

Question

I have a parent component passing state as props to a child component. An API is called on page load using componentDidMount in the parent component and the initial state of the data passed to the child changes. The change is reflected in the parent component but not in the child component.

Here is an excerpt from my code:

loan.js (Parent)

<ForecloseBtn id={this.state.lead_id} foreclose={this.state.isForeclosed }/>

ForecloseBtn.js (Child)

import React from 'react';
import { render } from 'react-dom';

class ForecloseBtn extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props);
        this.state = {
            lead_id: this.props.id,
            isForeclosed: this.props.foreclose,
        };
    }

    render() {

        return (
            ......
        )
    }
};

export default ForecloseBtn;

So here, the states lead_id and isForeclosed are changing in the parent component but not in the child component. How can I make the state update in the child component as well?

Answer 1

This is why in your child component you only ready the props in the constructor and set its state accordingly; if they change later on, you are not updating the child component state, so no re-render will be done.

There are several options to solve the issues, the easiest being not using state in the child component but directly props ; in this case as soon as the parent component is updated, the new props will trigger a re-render of the child component. This is also the cleanest solution, you will only have one source of truth, namely the props passed down from parent to child component.

Alternatively, you can use componentDidUpdate in the child and update its state based on the new props received from the parent:

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.id !== prevProps.id) {
    this.setState({ lead_id: this.props.id });
  }
  if (this.props.foreclose !== prevProps.foreclose) {
    this.setState({ isForeclosed: this.props.foreclose });
  }
}

Answer 2

You have to use the componentDidUpdate method in your child Component :

componentDidUpdate (prevProps) {
  if(prevProps.id !== this.props.id || prevProps.foreclose !== this.props.foreclose){
    this.setState({
      lead_id: this.props.id,
      isForeclosed: this.props.foreclose,
    })
  }
}

Each time your state or props changed, this method is called, and we reset lead_id and isForeClosed only if the props changed.

Answer 3

Two possible solutions here:

First

Do you really need to store the state that you're sending down as props from the parent as a state on the child? Why don't you use them as simple props as they are? Your child will re-render when they change.

Second

If you absolutely must store those as state on the child, you could render the child with a key prop that must change whenever you want your child to remount completely, because you would need a way to get your constructor function to run again.

Something like:

<ForecloseBtn 
  id={this.state.lead_id} 
  foreclose={this.state.isForeclosed }
  key={this.state.lead_id}
/>

You should read this, though:

You probably don't need derived state...

Answer 4

class ForecloseBtn extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state = {
            lead_id: props.id,
            isForeclosed: props.foreclose,
        };
    }

    render() {

        return (
            ......
        )
    }
};

You don't need this before props in child component constructor