如何强制渲染等待承诺完成？

Question

我正在尝试通过 props 传递 db 引用，但我在 Home 组件中收到 null。如果我无视承诺并取消等待，则一切正常，除非远程数据库已更新；那么由于明显的原因，需要重新加载两次才能看到更改。

我想知道如何在 prop 发送到 Home 组件之前强制执行此 Promise，或者在 Promise 完成后如何更新该 Promise。

export default class App extends Component {
  state = {
    db: null,
  };

  componentDidMount() {
    this.setUpDB();
  }

  setUpDB = async () => {
    const remoteDB = PouchDB('http://localhost:5984/db_name');
    const localDB = PouchDB('db_name');
    await remoteDB.replicate.to(localDB);
    this.setState({
      db: localDB,
    });
  };

  render() {
    return (
      <div>
        <Navbar />
        <Switch>
          <Route exact path='/' render={(props) => (
            <Home
              db={this.state.db}
            />
          )}/>
        </Switch>
      </div>
    );
  }
}

Answer 1

想出了如何解决它。我没有在 App.js 中复制 db，而是在 index.js 中进行了复制，并在复制之后渲染了所有内容。

顺便说一句，我也会在错误时渲染应用程序，这样如果用户离线，它仍然会使用本地数据库。

const startApp = () => {
  // Set Up DB
  const remoteDB = PouchDB('http://localhost:5984/db_name');
  const localDB = PouchDB('db_name');
  remoteDB.replicate.to(localDB)
  .on('complete', () =>
    renderApp(localDB)
  ).on('error', (err) =>
    renderApp(localDB)
  );
};

const renderApp = (db) => {
  // Render App
  ReactDOM.render(
    <Router>
      <App db={db} />
    </Router>,
    document.getElementById('root')
  );
};

startApp();

Answer 2

componentWillMount() 函数可能最终会在调用初始 render() 之前被多次调用，因此可能会导致触发多个副作用。由于这个事实，不建议将此函数用于任何引起副作用的操作（AJAX 调用）。请改用componentDidMount()。 在每个重新渲染周期中完成render() 后，将调用此函数。这意味着您可以确定组件及其所有子组件已正确呈现自身。由于这是唯一保证在每个重新渲染周期中仅调用一次的函数，因此建议将此函数用于任何导致副作用的操作。

componentDidMount() {
this.setUpDB();

}