Javascript数组不会在componentDidMount之外更新

Question

我正在尝试从数据库中获取一些数据，并将其添加到一个数组中，我在componentDidMount中执行此操作，以便以后可以使用它来设置组件的初始状态。然而，虽然数组是在promise内部更新的，但它似乎并没有在外部更新。有什么想法吗？这是供参考的代码。如有必要，我可以添加更多内容。

    class Equations extends React.Component {
        state = {
          equations: [] 
        }
    }

    componentDidMount() {
        let equations = []
        db.collection("equations").get().then(snapshot => {
            snapshot.forEach(function(doc) {
                equations = [...equations, doc.data()]
            });

        console.log(`inside: ${equations.length}`)
        });
    console.log(`outside: ${equations.length}`)
    }

  render() {
     return <div>stuff</div>
  }

我的数据库当前在数据库集合中有两个条目，所以我当然希望这两个日志都返回2，但只有内部日志返回2；外部日志由于某种原因返回0。

Answer 1

之所以会发生这种情况，是因为外部console.log在内部之前被调用，因为它是一个promise并且是异步的。

如果您添加async/await，您将看到外部将被更新。

async componentDidMount() {
    let equations = []
    await db.collection("equations").get().then(snapshot => {
        snapshot.forEach(function(doc) {
            equations = [...equations, doc.data()]
        });
        console.log(`inside: ${equations.length}`)
    });
    console.log(`outisde: ${equations.length}`)
}

Answer 2

inside日志位于promise中，这意味着它是异步的。在不深入代码的情况下，then是您的承诺。在返回响应之前，它会“等待”您的数据API完成，然后记录公式。

outside日志不在promise中，这意味着它是同步的。一旦调用componentDidMount (在组件被挂载之后立即)，它就会记录这些等式，这将是一个空列表。

任何依赖于数据库响应的活动都应该在promise的响应块中。