react useEffect方法上的箭头样式错误

Question

这是我使用React useEffect

的代码

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

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

我出现以下伴游错误的原因：

 Unexpected block statement surrounding arrow body  arrow-body-style

即使用方括号包裹仍然有相同的问题：

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

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

任何人都有解决此错误的好主意吗？ 请 ？谢谢

Answer 1

根据在.eslintrc文件中配置eslint的方式导致错误，

  

如果配置为"arrow-body-style": ["error", "always"]

这意味着您需要显式的return和方括号，在这种情况下，解决方案是

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，以便使用短命令突出显示错误或修复文件。