Ошибка стиля стрелки в методе реакции useEffect

Question

Вот мои коды, использующие React useEffect

    const [naked, setNaked] = useState(false);

    useEffect(() => {
        return () => setNaked(true);
    }, [props.onWatch]);

. По какой-то причине у меня возникает следующая ошибка eslint, говорящая:

 Unexpected block statement surrounding arrow body  arrow-body-style

Даже при использовании скобок по-прежнему возникает та же проблема:

    const [naked, setNaked] = useState(false);

    useEffect(() => {
        return () => {
          setNaked(true);
        }
    }, [props.onWatch]);

У кого-нибудь есть хорошая идея, чтобы исправить эту ошибку eslint?Пожалуйста ?Спасибо

Answer 1

Ошибка возникает в зависимости от того, как сконфигурирован ваш eslint в вашем .eslintrc файле

Если конфигурация "arrow-body-style": ["error", "always"]

Это означает, что вам нужны явный возврат и скобки, в этом случае решение будет

const [naked, setNaked] = useState(false);

useEffect(() => {
    return () => {
      setNaked(true);
    }
}, [props.onWatch]);

Если конфигурация "arrow-body-style": ["error", "never"]

Тогда вам не нужно использовать {}, в этом случае ваше решение будет

const [naked, setNaked] = useState(false);

useEffect(() => () => setNaked(true), [props.onWatch]);

Если конфигурация "arrow-body-style": ["error", "as-needed"]

В этом случае вам также не требуется возвращать внутри фигурных скобок, и ваше решение

const [naked, setNaked] = useState(false);

useEffect(() => () => {
      setNaked(true);
}, [props.onWatch]);

Пожалуйста, посетите следующую ссылку , чтобы узнать больше об этом правиле

Answer 2

Примеры правильного и неправильного кода можно найти в официальной документации ESLint.Дополнительную информацию об этой специальной ошибке можно найти здесь: arrow-body-style .Вкратце:

Функции стрелок имеют две синтаксические формы для своих тел функций.Они могут быть определены с помощью тела блока (обозначенного фигурными скобками) () => { ... } или с одним выражением () => ..., значение которого неявно возвращается.

В вашем возвращении есть дополнительная функция стрелки.Чтобы ваш код соответствовал ESLint, используйте следующее:

const [naked, setNaked] = useState(false);

useEffect(() => () => setNaked(true), [props.onWatch]);

Я бы также предложил вам настроить ESLint в выбранной вами среде IDE, чтобы можно было выделять ошибки или исправлять файлы с помощью короткой команды.