为什么说嵌套块是冗余的非独行块？

Question

`
import React from 'react';
import BuildControl from './BuildControl/BuildControl';
import './BuildControl.css';
const controls = [{ label: 'Cheese', type: 'cheese' }, { label: 'Bacon', type: 'bacon' }, { label: 'Meat', type: 'meat' }, { label: 'Salad', type: 'salad' }];


const BuildControls = () => {
    controls.map((ctrl) => {
        console.log("ctrl is:", ctrl.label, ctrl.type);
        return (<div className="BuildControls"><BuildControl key={ctrl.type} label={ctrl.label}></BuildControl></div>);
    });

}
export default BuildControls;

` enter image description here Eslint is not allowing to return from the callback or something else is wrong.

Answer 1

You did not type your code correctly in your question. You left out the block that eslint is complaining about. The problem is the opening and closing brackets you have on lines by themselves is surrounding code that does not contain a function expression, or a const/let declaration which means there is no actual block being created.

const BuildControls = () => {
    { // Beginning of lone block
        controls.map((ctrl) => {
            console.log("ctrl is:", ctrl.label, ctrl.type);
            return (<div className="BuildControls"><BuildControl key={ctrl.type} label={ctrl.label}></BuildControl></div>);
        });

    } // End of lone block
}
export default BuildControls;

See https://eslint.org/docs/rules/no-lone-blocks