Create React App 的“意外标记语句”警告答案

【问题标题】："Unexpected labeled statement" warnings with Create React AppCreate React App 的“意外标记语句”警告
【发布时间】：2017-10-15 01:52:55
【问题描述】：

我将如何修复这块与 Firebase 相关的代码，以符合 CRA 的 ESLint 规则：

db.broadcasts.on('child_added', (snap) => {
    this.setState((prevState) => {
        broadcasts: prevState.broadcasts.push(snap)
    });
});

以下是相关错误：

我试过allowing loops：

/*eslint no-labels: ["error", { "allowLoop": true }]*/

但这给了我以下错误：

error    Unexpected labeled statement

谢谢

【问题讨论】：

标签： javascript reactjs eslint arrow-functions create-react-app

【解决方案1】：

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

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

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 状态的工作方式。您需要返回下一个状态，而不是原地改变它。

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

所以，正确的版本应该是这样的：

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

详细了解why immutability is important 和returning object literals from arrow functions。

【讨论】：