在 REACT 兄弟组件之间传递数据

Question

A (Parent)
    |---- B (Child)
    |---- C (Child)

I'm trying to pass the data to sibling components[like from B to C ],

First, in the parent component [A], I have defined the callback function and passing this callback function to child [B],

handleCallback = (data) => {
    console.log('In parent', datafromChild)
    this.setState.listDataFromChild = data
  }

<LaunchPageButtons ParentCallBack={this.handleCallback} />

In the child component [B], I'm calling the callback as,

this.props.ParentCallBack('true')

Here I'm able to get the value in the callback function of parent [A] and updating the parent state. Till now its fine and working

Now I want to send the same data to Child [C] so I'm passing it as props from parent component[A] as,

<ChannelsModularGrid buttonselect={this.state.listDataFromChild} />

In the Child[C], to test whether I'm getting the data, I have put a check in one of the function as,

if (this.props.buttonselect) {
      debugger //eslint-disable-line
      console.log('test')
    }

I'm not getting the controll/debugger in the child component[C] at all. Please help me out to understand how to pass data from A to C in my case

Answer 1

Remember that setState is a function. In your parent's callback, instead of assigning to a property of setState , call the function with the updated slice of the state:

handleCallback = (data) => {
  console.log('In parent', datafromChild)
  this.setState({
    listDataFromChild: data
  })
}

Answer 2

as @cubbrr answers the question already, I will only add that although you did not specify the context of your code, errors might also happen if you do not properly bind functions, as this might set the state of the child component instead of the parent. So, for your case, either bind in the constructor or by sending the function as an arrow function which automatically binds:

1)

constructor(props){ super(props); this.handleCallback = this.handleCallback.bind(this) }

...


<LaunchPageButtons ParentCallBack={this.handleCallback} />

OR

2)

<LaunchPageButtons ParentCallBack={(data) => { console.log('In parent', datafromChild); this.setState({listDataFromChild: data}); }} />

You can read more about binding here: https://reactjs.org/docs/handling-events.html