反应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

错误的结果取决于您的.eslintrc文件中如何配置您的eslint

如果配置是"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]);

请访问following link以了解有关此规则的更多信息

Answer 2

您可以在官方ESLint文档中找到正确和错误代码的示例。有关此特殊错误的更多信息，请访问：arrow-body-style。简而言之：

箭头函数的函数体有两种句法形式。它们可以用块体（用花括号表示）() => { ... }或单个表达式() => ...定义，其值隐式返回。

您的返回还有一个额外的箭头功能。要使您的代码符合ESLint，请使用以下内容：

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

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

我还建议您在您选择的IDE中设置ESLint，以便您可以使用简短命令突出显示错误或修复文件。