反應useEffect鉤子和eslint警告-有解無憂

我正在尋找有關如何解決以下問題的建議：

我有一個組件 A，它有兩個狀態，state1 和 state2。

如果我只想在 state1 更改時運行效果，但在 useEFfect 回呼中我使用 state2 的值，我該如何解決有關陣列依賴項 eslint react hooks warning 的問題？

前任。

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>

}

uj5u.com熱心網友回復：

常用的方法通常是禁用專門針對該行的 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" />

uj5u.com熱心網友回復：

您需要// 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>

}

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370883.html

標籤：反应反应钩子使用效果

上一篇：如何洗掉未選擇路線的NavLink樣式

下一篇：如何從當前日期獲得最接近的日期？