React 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]);

请访问以下链接了解有关此规则的更多信息