Javascript &引用；“意外标记语句”；创建反应应用程序的警告

我如何着手修复这段Firebase相关代码，以符合CRA的ESLint规则：

db.broadcasts.on（'child_added'，（snap）=>{
this.setState（（prevState）=>{
广播：prevState.broadcasts.push（快照）
});
});

以下是相关错误：

我试过：

但这给了我以下错误：

error    Unexpected labeled statement 

---

谢谢

此规则在您的代码中发现了一个错误。
您需要修复错误，而不是绕开规则

此部分被解析为带标签的语句：

this.setState((prevState) => {
    broadcasts: prevState.broadcasts.push(snap)
});

因此，浏览器可以看到：

this.setState(function(prevState) {
    broadcasts: // A label, like in switch() statement
      prevState.broadcasts.push(snap);
    // This function doesn't return anything
});

这里有两个问题：

1） 不要变异

prevState

这不是React state的工作方式。您需要返回下一个状态，而不是在适当的位置对其进行变异

2） 您没有正确使用ES6箭头功能如果要隐式返回对象，必须将其放在parens中。否则浏览器将其解析为带标签的语句。这就是为什么你会收到关于标签的令人困惑的信息

因此，正确的版本如下所示：

this.setState((prevState) => ({ // Note this paren! It is essential.
    broadcasts: prevState.broadcasts.concat([snap]) // Note lack of mutation!
}));

了解更多关于和的信息

this.setState((prevState) => ({ // Note this paren! It is essential.
    broadcasts: prevState.broadcasts.concat([snap]) // Note lack of mutation!
}));