почему он говорит, что вложенный блок является избыточным, не одиноким блоком?

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;

` введите описание изображения здесь Eslint не позволяет вернуться из-за обратного вызова или что-то еще не так.

Answer 1

Вы не правильно ввели свой код в своем вопросе.Вы оставили блок, на который жалуется Эслинт.Проблема заключается в том, что открывающая и закрывающая скобки в строках сами по себе представляют окружающий код, который не содержит выражения функции, или объявление const / let, означающее, что фактический блок не создается.

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;

Смотри https://eslint.org/docs/rules/no-lone-blocks