我通过 Parent.But this.prop 将 msg 从 Child1 传递给 Child2

Question

import React, { Component,Fragment } from 'react';
import Child1 from './Child1'
import Child2 from './Child2'

class Parent extends Component{
  state={
    Parent_msg_state:""
  }
  render(){
    
    return(
      <Fragment>
        {JSON.stringify(this.state)}
        <Child1 changePstate={(msg)=>this.setState({Parent_msg_state:msg})}/>
        <Child2 msgFromChild1={this.state.Parent_msg_state}/>
      </Fragment>
    )
  }
}

export default Parent;

This is Parent 


#Child1#
import React, { Component, Fragment } from "react";

class Child1 extends Component {
  render() {
    return (
      <Fragment>
        <table>
          <tr>John</tr>
          <tr>Cena</tr>
          <tr>12</tr>
          <tr>
            <button
              type="button"
              onClick={(data) => this.props.changePstate("Hi Child2")}
            >
              Send msg to child2 via Parent
            </button>
          </tr>
        </table>
      </Fragment>
    );
  }
}

export default Child1;

This is Child1 

#Child2#

import React, { Component,Fragment } from 'react';


class Child2 extends Component{
    state={
        Child2_msg_State:this.props.msgFromChild1 --> Unable to map 
    }
  render(){
    return(
      <Fragment>
          {JSON.stringify(this.state)}
          {JSON.stringify(this.props.msgFromChild1)} -->Msg is reflecting here but not in state
            <h1>{this.props.msgFromChild1}</h1>
      </Fragment>
    )
  }
}

export default Child2;
This is child2

I am passing msg from Child1 to Child2 via Parent. I have updated the Parent state from Child1 and pass that state variable as a Prop in Child2. Now I am trying to map that this.props.msgfromChild1 to Child2 state but It is not happening and it remain an empty state variable but In the render() this.props.msgfromChild1 has showing the exact passed value.I am not getting any kind of an error.

I have also tried componentdidmount to change the state but that doesn't work.

Answer 1

You are getting msgFromChild1 in props, but it's not being updated in state of child2 because the following code,

state={
    Child2_msg_State:this.props.msgFromChild1
}

Only sets the initial state of Child2_msg_State , it does not update the state when props change.

You were almost right when you tried to use ComponentDidMount but what you need is ComponentDidUpdate , while ComponentDidMount is called only during the first render of the component, ComponentDidUpdate function is called every time a component's data changes, in our case the value of props changes.

So, we have to update our state as props when it changes. Using the following function in Child2 component:

componentDidUpdate(prevProps) {
    // Added prevProps conditional check to prevent infinite loop
    if (prevProps.msgFromChild1 !== this.props.msgFromChild1) {
      this.setState({
        Child2_msg_State: this.props.msgFromChild1
      });
    }
  }

In the above code, we are updating the Child2_msg_State whenever Child2 component is updated using ComponentDidUpdate() function

Find the same from CodeSandbox below

Answer 2

You should initialize your state in the constructor :

constructor(props) {
    super(props);
    this.state = {/*initialization*/};
  }

If your component still doesn't change the state, try this:

static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.Child2_msg_State !== nextProps.msgFromChild1)
        this.setState({
            Child2_msg_State: nextProps.msgFromChild1
        });
}