reactjs - setState 不使用 firebase 对象更新数组

Question

所以我遇到的问题是 setState 方法似乎不想更新我的数组 questions 的状态。但是当我使用 console.log(returnArr) 时，控制台会从 firebase 打印我想要的项目。

我做错了什么？

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      questions: [],
      current_question: 0
    };
  }

  componentDidMount() {
    var rootRef = firebase.database().ref();
    var ref = rootRef.child("Geography");
    var returnArr = [];

    ref
      .once("value")
      .then(function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
          var item = childSnapshot.val();
          item.key = childSnapshot.key;

          if (item.key === "2") {
            returnArr.push(item.Question);
            setState = () => ({
              questions: returnArr
            });
            console.log(returnArr);
          }
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    // ...
  }
}

Answer 1

setState 是您应该调用的函数，而不是您应该为其分配新值的对象。

如果您想在 firebase 回调函数中使用 this，则必须将该函数绑定(bind)到 this 或使用箭头函数。您很可能希望在处理整个快照后将数组设置为状态。

示例

class App extends React.Component {
  // ...

  componentDidMount() {
    firebase
      .database()
      .ref()
      .child("Geography")
      .once("value")
      .then(snapshot => {
        const questions = [];

        snapshot.forEach(childSnapshot => {
          const item = childSnapshot.val();
          item.key = childSnapshot.key;

          if (item.key === "2") {
            questions.push(item.Question);
          }
        });

        this.setState({ questions });
      })
      .catch(error => {
        console.error(error);
      });
  }

  // ...
}