javascript - 仅在多个子组件运行完成后才更新父组件

Question

我有一个带有多个子组件的父 react 组件，这些子组件是通过 .map() 函数创建的。我正在传递一个函数 addCallback() 作为子属性，所以我有一个引用并且可以通过父级触发所有子级的 handleRun() 函数。

我正在尝试将我的父组件的状态更新为 running = true 当所有子级都在运行时更新为 running = false 并在父级上呈现所述状态所有的 child 都跑完了。然而，状态似乎并没有按照我指定的特定顺序更新。

这是我的做法:

let promise1 = this.setState({isRunning:  true},
            () => {
                this.state.childRef.map(x => x())
            });

Promise.all([promise1])
    .then(() => this.setState({isRunning: false}))

这是 codesandbox 中的完整代码:link

非常感谢您的帮助，因为我对 React(和一般的 Javascript)还是很陌生。谢谢!

Answer 1

因为 runSomething 不是 Promise。你必须改变。

runSomething() {
  return new Promise((resolve, reject) => {
    this.setState({ status: "running" });
     // simulate running something that takes 8s
     setTimeout(() => {
       this.setState({ status: "idle" });
       resolve(true);
     }, 3000);
  });
}

这里有一个工作沙箱 https://codesandbox.io/s/fragrant-cloud-5o2um