"Unexpected labeled statement" Create React App 警告

Question

我将如何修复这块与 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 状态的工作方式。您需要 return 下一个状态，而不是就地改变它。

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

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

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

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

"Unexpected labeled statement" Create React App 警告

"Unexpected labeled statement" warnings with Create React App

javascript

reactjs

eslint

arrow-functions

create-react-app