使用Create React App创建“意外的标签声明”警告

Question

How would I go about fixing this block of Firebase-related code, to conform to CRA's ESLint rules:

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

Here are the related errors:

I've tried allowing loops :

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

But that gave me the following error:

error    Unexpected labeled statement 

Thanks

Answer 1

This rule found a bug in your code.
Rather than work around the rule, you need to fix the bug.

This part is parsed as a labeled statement:

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

So the browser sees this:

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

There are two issues here:

1) Do not mutate prevState . This is not how React state works. You need to return the next state rather than mutate it in place.

2) You are not using the ES6 arrow function correctly. If you want to implicitly return object, you must put it in parens. Otherwise the browser parses it as a labeled statement. This is why you get a confusing message about labels.

So, the correct version would look like this:

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

Learn more about why immutability is important and about returning object literals from arrow functions .