javascript - Create React App 出现 "Unexpected labeled statement"警告

Question

我将如何修复这 block 与 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 

谢谢

Answer 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 .