反应js-将值从子级传递给父级，然后传递给另一个子级？

Question

Edit: Thanks for the responses guys. I've found the root of my problem here. For some reason the code (I've inherited from others) is calling up my component multiple times, overwriting my values. I think I can take it from here. Thanks anyway guys.

My components are set up like this:

A
- B
- C

And I would like B, when triggered, to pass a value back to A and set a new state. Then, when an event is triggered, A would pass that value to C as a prop.

So far, I've tried creating a function in A then pass it to B as a prop, as such:

A: 

handler(){
    setState({value: someVal});
}

render(){
    <B func={this.handler}/>
    eventTriggered <C cProp={this.state.value}/>
}

However, as (I've found out that) setState() is asynchronous, when it is time for C to mount, this.state.value might not have the value from B assigned yet.

Perhaps my entire approach is wrong, but is there anyway of remedying this?

Thanks in advance.

Answer 1

In your render() method, you could not render C until the event has been triggered and state has a value eg

render() {
    return (
        <B func={this.handler} />
        {eventTriggered && this.state.value &&
            <C cProp={this.state.value} />
        }
    )
}

EDIT:

Make sure in component A you have:

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

Answer 2

typically, you can solve this kind of issue by using a second argument to setState (a function)

eg

handleClick(e){
  this.setState({value: e.target.value}, () => this.props.onChange(this.state.value))
}

the second function will only fire the onChange prop when the state is reconciled. If you want to fire it earlier, send the raw value of e.target.value instead