如何将对象从 Firebase 查询推送到 this.state

Question

我已经从 Firebase 中提取了数据。数据就在那里，因为 console.log 证实了这一点。(2) [{…}, {…}]0:id: 1.417253735436239name: {Jack: true}__proto__: Object1:id: 1.7540006580031215name: {Jack: true, Jill: true}__proto__: Objectlength: 2但是，我需要遍历这些数据以列出名称，但是当我尝试将这些数据 setState 到一个数组中时（肯定是在构造函数中声明的），我得到“无法设置未定义的属性“setState”。这是带有不起作用的 setList 函数的代码：let users = [];      listRef.on("value", function (snapshot) {        users.push({          id: 1 + Math.random(),          name: snapshot.val()        })        console.log(users);      });      function setList(users){        this.setState({ names: users})      }      setList();    });  }Names 在构造函数中的 this.state 中被声明为一个数组。我哪里错了？

Answer 1

我克服了错误。在块内使用函数是错误的。我将 setState 从大括号中移出并且没有该函数。

 setName = e => {

    e.preventDefault()

    this.setState({ [e.target.name]: e.target.value })

    let textBox = document.getElementById('inputDivId');

    textBox.style.display = "flex";

    let messagesBox = document.getElementById('messagesDivId');

    messagesBox.style.display = "flex";

    let thinkDel = document.getElementById('options');

    thinkDel.style.display = "flex";

    let nameBox = document.getElementById('nameDivId');

    nameBox.style.display = "none";

    // Add ourselves to presence list when online.

    let name = this.state.name;

    // let names = this.state.names;

    let connectedRef = firebase.database().ref('.info/connected');

    // let users = [];

    connectedRef.on('value', function (snap) {

      if (snap.val() === true) {

        const con = listRef.child(name);

        con.onDisconnect().remove();

        con.set(true);

      }

      let users = [];

      listRef.on("value", function (snapshot) {

        users.push({

          id: 1 + Math.random(),

          name: snapshot.val()

        })

        setList(users);

      });

      function setList(users) {

        this.setState({

          names: users

        })

      }

    });

  }

但是我仍然没有根据需要获取 this.state.names 中的数据！

Answer 2

数据从 Firebase 异步加载。在加载数据时，主代码继续运行。然后，当数据可用时，您的回调将被调用。

通过放置一些日志语句最容易看到这一点：

console.log("Before attaching listener");

listRef.on("value", function (snapshot) {

  console.log("Got data");

});

console.log("After attaching listener");

当您运行此代码时，它会记录：

在附加侦听器之前

附加监听器后

得到数据

这可能不是您所期望的，但这实际上是定义的行为。它还解释了为什么您的代码不起作用：到您调用时，this.setState({ names: users })您的回调尚未运行，并且users是空的。

因此，任何需要数据库数据的代码都必须在回调中，或者从那里调用。在 ReactJS 的情况下，它非常简单：您只需setState从回调中调用：

let users = [];

listRef.on("value", function(snapshot) {

    users.push({

        id: 1 + Math.random(),

        name: snapshot.val()

    })

    setList(users);

});

function setList(users) {

    this.setState({

        names: users

    })

}

我不完全确定数据结构是什么listRef样的，但怀疑您实际上正在寻找这个：

listRef.on("value", function(snapshot) {

  let users = [];

  snapshot.forEach(function(user) {

    users.push({

        id: snapshot.key,

        name: snapshot.val()

    })

  });

  setList(users);

});