React 挂钩功能更新导致 eslint no-shadow 错误

Question

我正在使用 React useEffect 来更新状态。 Eslint 警告我正在犯无阴影错误。我认为这与某些 eslint 或 eslint 插件设置有关，因为 CRA 不会导致相同的错误。如何解决？

function Sample(props) {
  const { flag } = props;
  const [value, setValue] = useState();

  useEffect(() => {
    if (flag) {
      setValue(value => value + 1);
    }
  }, [flag]);
}

这里，setValue(value => value + 1); 的值由于在 useState 中声明而导致无阴影。

Answer 1

eslint 正确地抱怨是因为你在 useState 钩子中声明了一个 value 变量，但是你在 useEffect 中重新声明了一个名为 value 的 另一个 变量钩子。

最简单的解决方法是不通过更改 setValue 调用中的变量来隐藏变量名称 -

useEffect(() => {
  if (flag) {
    setValue(prev => prev + 1);
  }
}, [flag]);