React开发工具显示空白状态，控制台显示数据

Question

我在React应用程序中遇到一个奇怪的状态问题。我将初始状态设置为空数组，并在componentDidMount()方法中从Firebase检索了一些数据。我将JSON对象放入新数组中，然后调用setState()，并将其传递给新数组。

问题在于它似乎没有更新状态。据我所知：

在setState之后调用
1. Render()
2. 我对setState()的回叫已被触发
3. 当我console.log设置状态的数组时，它看起来不错
4. 最奇怪的是，当我在Chrome React Devtools中检查状态时，它显示为空，但由于某些原因，我可以使用$ r.state.nameOfMyObject
将数组打印到控制台
5. 如果我直接从开发工具中更改其他状态，应用程序将立即呈现并最终显示我一直在努力的数据。

我认为更新数组可能存在一些问题；也许差异算法不够深入，以至于看不到数组内部的数据发生了变化。为了对此进行测试，我尝试将有问题的对象的初始状态设置为null，但随后在整个应用程序中都设置了错误，因为该应用程序试图在null上调用各种数组方法。

我尝试遍历该应用程序，控制台记录了每个步骤，但是我找不到问题。

初始状态的片段：

  state = {
    fullSchedule: [],
    currentSet: [],
    aCoupleOfOtherObjects,
}

componentDidMount（）：

  componentDidMount() {
    const activities = [];
    const projectReference = firestoreDB.collection("project").doc("revision001").collection("activities");
    projectReference.get().then(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
        activities.push(doc.data());
      });
    });
    console.log(activities);
    this.setState({fullSchedule: activities});
    this.setState({currentSet: activities}, () => {
      console.log("State updated from DB");
    });
    console.log("called setstate");
  }

我不知道为什么setState（）方法似乎没有设置状态，有什么想法吗？ 谢谢！

Answer 1

projectReference.get()是异步的，您正在尝试在调用状态后立即设置状态，这将不起作用。

尝试在then回调中设置状态：

projectReference.get().then(function(querySnapshot) {
  querySnapshot.forEach(function(doc) {
    activities.push(doc.data());
  });

  this.setState({fullSchedule: activities, currentSet: activities});
});

This应该使您对发生的事情有更好的了解。