Question

以下是提交名称时调用的函数。它进入了Firebase数据库，然后我们可以通过查看数据库来查看谁已连接。

但是，当我将这些数据放入对象（用户）数组时，我陷入了困境。我试图将这些数据放入this.state.names（在构造函数状态中声明的数组），但我无法理解。

错误消息指向代码底部的函数。功能是否应该移动？为什么不起作用？我读过很多关于“ this”的文章，但是很挣扎。

setName = e => {
    e.preventDefault()
    let name = this.state.name;
    let connectedRef = firebase.database().ref('.info/connected');

    connectedRef.on('value', (snapshot) =>{
      if (snapshot.val() === true) {
        // Connected
        const con = listRef.child(name);
        con.onDisconnect().remove();
        con.set(true);   //Write data (true) 
      }

      listRef.on("value", (snapshot) => {
        let users = [];
        snapshot.forEach( (user) => {
          users.push({
            id: snapshot.key,
            name: snapshot.val()
          })
        });
        setList(users);
      });
      function setList(users) {
        this.setState({
          names: users
        })
      }
    });
  }

有什么想法我在做什么错吗？

Answer 1

普通函数具有其自身的上下文。为了能够从上级接收正确的this，您需要将setList函数修改为箭头函数。像这样：

const setList = (users) => {
  this.setState({
    names: users
  })
}

也不要忘记将其提起，声明应在使用前进行，因为const变量不会提升。

ReactJS。火力基地。 TypeError：无法读取未定义的属性“ setState”

1 个答案: