Question

我试图通过props传递db引用，但是我在Home组件中收到null。如果我无视承诺并取消等待，一切正常，除非远程数据库更新;然后由于显而易见的原因需要两次重新加载来查看更改。

我想知道如何在将道具发送到Home组件之前强制执行此承诺，或者在承诺通过后如何更新道具。

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

在调用初始componentWillMount()之前，

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

componentDidMount() {
this.setUpDB();

}

Answer 2

弄清楚如何修复它。我没有在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();

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

2 个答案: