簡體   English   中英

React Hook useMemo有一個不必要的依賴:'匹配'

[英]React Hook useMemo has an unnecessary dependency: 'match'

這是我的代碼

const Head: FC<{ match: faceMatch<{}> }> = ({ match }) => {
  const [arrProd, setArrProd] = useState<JSX.Element[]>([]);
  const [ImgCatIndx, setImgCatIndx] = useState<number>(0);
  const [resError, setResError] = useState<string>("");
  useMemo(() => {
    setImgCatIndx(0);
  }, [match]);//warning React Hook useMemo has an unnecessary dependency 
  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;
    document.title = `Hat Jacket Pants Shoes Suit | Amasia`;
    (async () => {
      setArrProd([]);
      setResError("");
      try {
        const Res = await fetch(
          `https://foo0022.firebaseio.com/New/${headcateg[ImgCatIndx]}.json`,
          {
            signal: signal
          }
        );
        if (!Res.ok) {
          throw new Error("Page Not Found 404");
        }
        const ResObj = await Res.json();
        const ResArr = await Object.values(ResObj).flat();
        await setArrProd(
          ResArr.map(
            ({
              to,
              id,
              price,
              src,
              title,
              sold,
              shipping
            }: faceProductList) => (
              <Fragment key={id}>
                <NavLink to={to}>
                  <img
                    src={`/${src[0]}`}
                    alt={title}
                    height={"220px"}
                    width={"220px"}
                  />
                  <span>{price}</span>
                  <span>{shipping}</span>
                  <span>{sold}</span>
                </NavLink>
              </Fragment>
            )
          )
        );
      } catch (error) {
        if (error.name !== "AbortError") {
          setResError(error.message);
        }
      }
    })();
    return () => {
      abortController.abort();
    };
  }, [ImgCatIndx]);

  if (resError !== "") {
    return <HandlerErr error={resError} />;
  } else if (!arrProd.length) {
    return <Loding />;
  }
return(....)

我進入控制台。

React Hook useMemo有一個不必要的依賴:'匹配'。 排除它>或刪除依賴關系數組。

我想要當改變比賽已經改變並且ImgCatIndx = 0.時不清楚為什么我在這里收到警告......如何相關......如何解決警告?

您應該使用useEffect而不是useMemo。如果您使用react路由器,則匹配對象會在更新歷史記錄時更改,即使傳遞相同的參數並正確傳輸參數本身也是如此。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM