Javascript 如何使用已解析的承诺值更新子组件？

我被一个看起来像这样的架构所困扰：

基本上，顶级

组件1

定义了函数和数据，这些函数和数据作为道具传递给

组件2

，然后作为道具传递给

组件3

，在那里呈现数据并调用函数

到目前为止，这一切都很顺利，但现在的问题是

组件1

引入了对异步函数的调用，该函数返回一个承诺，当解决该问题时，将更新随后作为道具传递给

组件2

的原始数据，但

组件3

从未被通知数据已更新，正因为如此，它从不重新渲染，也从不显示更新的数据

---

由于我不允许更改这个失败的架构，我需要一个建议，告诉我当

组件1

更新原始道具时如何重新渲染

组件3

？

可能错误在于道具从第一个组件传递到第三个组件的方式，请检查以下基本工作示例：

class Hello extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      fromFirst: 0
    }
  }
  componentWillMount(){
     // Used just as example of async triggering
     setTimeout(() => {
     this.setState({fromFirst: 1})
     }, 2000)
  }
  render() {
    return (
    <div>
      Hello {this.props.name}
      <SecondComponent fromFirst={this.state.fromFirst} />
    </div>
    )
 }
}

class SecondComponent extends React.Component {
    constructor(props){
    super(props);
    this.state = {
     fromSecond: 2
    }
  }
  render() {
    return (
    <div> 
    <p> From First: {this.props.fromFirst} </p>
    <p> On Second: {this.state.fromSecond}</p>
    <ThirdComponent fromFirst={this.props.fromFirst} fromSecond={this.state.fromSecond}/>
    </div>)
  }

}

class ThirdComponent extends React.Component{
 constructor(props){
    super(props);
    this.state = {
     fromThird: 2
    }
  }
  render(){
    return (
      <div>
        <p>Third asks of first {this.props.fromFirst}</p>
      </div>
    )
  }
}


ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
从一开始：0
}
}
组件willmount（）{
//用作异步触发的示例
设置超时（（）=>{
this.setState（{fromFirst:1}）
}, 2000)
}
render（）{
返回(
你好{this.props.name}
)
}
}
类SecondComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
从秒开始：2
}
}
render（）{
返回(
From First:{this.props.fromFirst}

第二个：{this.state.fromSecond}

)
}
}
类ThirdComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
第三名：2
}
}
render（）{
返回(
第三个请求第一个{this.props.fromFirst}

)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

检查工作状态，如您所说：

组件1实际做的是，它用数据填充对象，并将该数据分派给操作。。。大约在同一时间，它还等待promise被解析，以便更新稍早调度的原始对象

这就是问题所在。不能直接修改状态或道具。这意味着您不能将属性分配给

此.state

或它所引用的对象上的属性。相反，您必须用新对象替换它们。例如，你不能这样做：

// WRONG
this.state.foo.bar = 42;

相反，您必须这样做：

this.setState(({foo}) => ({foo: {...foo, bar: 42}}));

---

这是完全正常的。当组件1获得更新的数据（例如，新状态）时，它应该重新呈现，这将把更新的数据传递给组件2，从而传递给组件3。我是否遗漏了一个微妙之处？如果是这样的话，演示这个问题可能会有所帮助，最好是使用堆栈片段（

[]

工具栏按钮）运行一个问题。堆栈代码段支持React，包括JSX。稍后我可能会给出一个示例，但基本上，在promise解决后，组件3不会自动使用更新的数据重新渲染，只有当我通过执行附加操作手动启动组件的重新渲染时才会发生这种情况……听起来组件1并没有将该信息视为状态。既然它是国家，它就应该把它当作国家。这将自动触发渲染。我刚刚发现，使用React-Dev工具，状态发生了变化，每个组件（组件3、组件2和组件1）都有更新的值，但这并没有触发重新渲染…@t.J.Crowder组件1实际做的是，它用数据填充

对象

，并将该数据发送到操作。那部分很好。问题是，与此同时，它还等待promise得到解决，以便更新稍早发送的原始

对象。因此，
对象
被更新，
组件1
的状态被更新，但React没有意识到它，并且它不会重新渲染组件，如果我手动单击组件启动重新渲染，显示的数据很好..我认为问题不在于传递值，该值被传递给组件3，但它现在知道了。组件1实际做的是，它用数据填充
对象
，并将该数据分派给操作。那部分很好。问题是，与此同时，它还等待promise得到解决，以便更新稍早发送的原始
对象。因此，
对象
被更新，
组件1
的状态被更新，但React没有意识到它，并且它不会重新呈现组件……根据您对问题的描述，上面的基本示例运行良好，如果没有更全面的示例，将很难评估根本问题。把它作为一个基本的起点，如果它有助于你接受答案，如果没有，请在你的工作示例中添加一个JSFIDLE，否则很难帮助你。是的，当然，但我找到了一个解决方案。基本上，当承诺得到解决时，我将派遣一个新的行动。这几乎使React意识到状态已更改，并重新呈现组件。希望它能在没有这种可怕的黑客攻击的情况下工作…@Zed尝试导入RXJS以用于更复杂的场景，您可以将订阅作为道具传递，然后在子元素中订阅它们以更新它们的状态。否则，请使用Redux