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);
      });
  }

  // ...
}

Answer 2

您没有调用setState，而是在重新定义它。

将if更改为此：

if(item.key === '2'){
  returnArr.push(item.Question)
  this.setState({
      questions: returnArr
  });
  console.log(returnArr)

}

此外，您可能想在forEach结束后调用setState。用您实现的方式，每次执行if代码时都会调用setState。将setState调用移出forEach会使setState仅被调用一次。

setState不会使用Firebase对象更新数组

2 个答案: