Question

编辑：谢谢你们的回应。我在这里找到了问题的根源。出于某种原因，代码（我继承自其他代码）多次调用我的组件，覆盖我的值。我想我可以从这里拿走它。无论如何，谢谢你们。

我的组件设置如下：

A
- B
- C

我希望B在被触发时将值传递回A并设置新状态。然后，当一个事件被触发时，A会将该值作为道具传递给C.

到目前为止，我已尝试在A中创建一个函数，然后将其作为道具传递给B，如下：

A: 

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

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

但是，正如（我发现）setState（）是异步的，当C挂载时，this.state.value可能没有分配B的值。

也许我的整个方法都是错误的，但无论如何要解决这个问题吗？

提前致谢。

Answer 1

在render()方法中，在触发事件并且状态具有值之前，您无法呈现C.

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

编辑：

在组件A中确保您拥有：

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

Answer 2

通常，您可以通过使用setState（函数）的第二个参数来解决此类问题

例如

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

第二个函数只会在调和状态时触发onChange prop。如果您想提前启动它，请发送原始值e.target.value而不是

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

2 个答案: