反应 useEffect 钩子和 eslint 警告答案

【问题标题】：React useEffect hook and eslint warning反应 useEffect 钩子和 eslint 警告
【发布时间】：2022-01-08 08:36:10
【问题描述】：

我正在寻找有关如何解决以下问题的建议：

我有一个组件 A，它有两个状态，state1 和 state2。

如果我只想在 state1 发生变化时运行效果，但在 useEFfect 回调中我使用 state2 的值，我该如何解决数组依赖 eslint react hooks 警告的问题？

例如

function A() {
    const [state1, setState1] = useState(0);
    const [state2, setState2] = useState(0);

    useEffect(() => {
        const a = state1 + state2;
        // do some async logic using a
 
    }, [state1]); //Here eslint react hooks rule requests adding state2 to the dependency array!

return <div> some text </div>

}

【问题讨论】：

标签： reactjs react-hooks use-effect

【解决方案1】：

您需要像这样将// eslint-disable-next-line react-hooks/exhaustive-deps 添加到您的 userEffect 中：

function A() {
    const [state1, setState1] = useState(0);
    const [state2, setState2] = useState(0);

    useEffect(() => {
        const a = state1 + state2;
        // do some async logic using a


       // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [state1]); //Here eslint react hooks rule requests adding state2 to the dependency array!

    return <div> some text </div>

}

【讨论】：

感谢@Luccin，但我正在寻找一种更高级的方法，而不禁用此规则。例如，我考虑创建一个新的 ref 来保存 state2 的更新值...

【解决方案2】：

常见的方法通常是专门针对该行禁用 linting 规则。

function A() {
  const [state1, setState1] = useState(0);
  const [state2, setState2] = useState(0);

  useEffect(() => {
    // do some async logic using a
    const a = state1 + state2;

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [state1]);

  return <div> some text </div>;
}

但这里的缺点是，如果依赖项实际上发生变化并且您忘记更新依赖项数组，它可能会掩盖依赖项问题。

您可以使用 React ref 和额外的 useEffect 挂钩来缓存当前的 state2 值，并在另一个 useEffect 回调中引用它。

function A() {
  const [state1, setState1] = useState(0);
  const [state2, setState2] = useState(0);

  const state2Ref = useRef(state2);

  useEffect(() => {
    state2Ref.current = state2;
  }, [state2]);

  useEffect(() => {
    // do some async logic using a
    const a = state1 + state2Ref.current;
  }, [state1]);

  return (
    ...
  );
}

function A() {
  const [state1, setState1] = React.useState(0);
  const [state2, setState2] = React.useState(0);

  const state2Ref = React.useRef(state2);

  React.useEffect(() => {
    state2Ref.current = state2;
  }, [state2]);

  React.useEffect(() => {
    // do some async logic using a
    const a = state1 + state2Ref.current;
    console.log("effect called", a);
  }, [state1]);

  return (
    <div>
      some text
      <div>
        <button type="button" onClick={() => setState1((c) => c + 1)}>
          Update State 1
        </button>
        <button type="button" onClick={() => setState2((c) => c + 1)}>
          Update State 2
        </button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <A />,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />

【讨论】：