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

Question

我已经从 Firebase 中提取了数据。数据就在那里，因为 console.log 证实了这一点。

(2) [{…}, {…}]

0:

id: 1.417253735436239

name: {Jack: true}

__proto__: Object

1:

id: 1.7540006580031215

name: {Jack: true, Jill: true}

__proto__: Object

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