反应JS。火力基地。 TypeError：无法读取未定义的属性“setState”答案

【问题标题】：ReactJS. Firebase. TypeError: Cannot read property 'setState' of undefined反应JS。火力基地。 TypeError：无法读取未定义的属性“setState”
【发布时间】：2023-12-29 19:27:02
【问题描述】：

以下是提交名称时调用的函数。它转到 firebase db，然后我们可以通过查看 db 来查看谁连接了。

但是，当我将这些数据提取到对象（用户）数组中时，我就卡住了。我正在尝试将此数据推送到 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
        })
      }
    });
  }

任何想法我做错了什么？

【问题讨论】：

您的回调使用function 语法，这会导致this 超出范围。将您的 .on 回调修改为箭头函数
请您进一步解释一下好吗？
刚刚对快照和 foreach 函数分别进行了尝试。问题仍然存在。 OP 编辑为包含箭头功能，但这不是解决方案。

标签： javascript reactjs this

【解决方案1】：

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

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

并且不要忘记将它抬起，声明应该在使用之前，因为const变量不会提升。

【讨论】：