React Hook useCallback 有一個不必要的依賴：'price'。 排除它或刪除依賴數組 react-hooks/exhaustive-deps

Question

import React, {Fragment, useState,useCallback } from "react";

const ProcessingSearch = () => {
  const [price, setPrice] = useState({ maxPrice: 0, minPrice: 0 });

  const inputMaxMin = useCallback(
    ({ target: { value, name } }) => {
      name === "maxPrice"
        ? setPrice(({ minPrice }) => ({ maxPrice: value, minPrice }))
        : setPrice(({ maxPrice }) => ({ minPrice: value, maxPrice }));
    },
    [price]
  );

  return (
    <Fragment>
      <form onSubmit={() => {}}>
        {"Min"}
        <input
          {...ProcessingSearchInputPrice}
          value={price.minPrice}
          onChange={inputMaxMin}
        />
        {"Max"}
        <input
          {...ProcessingSearchInputPrice}
          value={price.maxPrice}
          onChange={inputMaxMin}
        />
        <input type="submit" title={"Submit price range"} value={"Go"} />
      </form>
    </Fragment>
  );
};

當我使用價格時，我收到一個錯誤：

React Hook useCallback 有一個不必要的依賴：'price'。 排除它或刪除依賴數組 react-hooks/exhaustive-deps

Answer 1

它是useCallback實現的警告（不是因為price使用）。

正如警告所述，從依賴項數組[price]刪除price變量：

const inputMaxMin = useCallback(
    ({ target: { value, name } }) => {
      name === "maxPrice"
        ? setPrice(({ minPrice }) => ({ maxPrice: value, minPrice }))
        : setPrice(({ maxPrice }) => ({ minPrice: value, maxPrice }));
    },
   []                 // <--- remove price, not used within the hook.
  );

在這種情況下，我相信您可以刪除useCallback的使用，因為您不會useCallback任何內容，請查看示例。

Answer 2

我無法弄清楚為什么不需要screens作為依賴項以及為什么我必須刪除它們。