Javascript 如何将对象从Firebase查询推入此.state

我从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

但是，我需要遍历此数据以列出名称，但是当我尝试将此数据设置为数组（在构造函数中定义）时，我会得到未定义的'Cannot set property'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();
    });
  }

名称在构造函数的this.state中声明为数组

---

我哪里出错了？

我克服了错误。在块内使用函数是错误的。我将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中的数据

数据从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);
});

---

setState

不是一个对象，它是一个异步函数，您需要像这样设置state

this.setState（{name:users}）

Thannks，Uday。我已经更新了此处的问题，但问题尚未解决-仍然显示“无法读取未定义的属性”setState“。由于我无法理解，您能否用react组件更新您的问题？我正在处理类似的问题，请检查我在Hi Frank中的代码，谢谢您的解释。我当然需要将Firebase与React一起使用。但是，即使使用您在此处编写的代码，问题仍然存在。事实上，undefined的TypeError:无法读取属性“setState”返回。此后，我对原始问题进行了编辑，以显示整个setName（）函数，以便更清楚地了解情况。我希望这有助于解决问题。