Question

我的组件从查询字符串获取哈希ID，然后使用该哈希调用api以获取帖子以供审核。

eslint强迫我将自定义钩子添加到依赖项数组。

  fetchpost();
  }, [query]);

但是这样做会导致无限循环。为了停止它，我需要禁用此eslint规则，如下所示。

// component file 
  const history = useHistory();
  const dispatch = useDispatch();
  const query = useQuery();
  const [post, setPost] = useState(null);
  const [hash, setHash] = useState(null);

  useEffect(() => {
    const fetchpost = async () => {
      const hash = query.get("hashed_id");
      const post = await fetchReviewPost(
        `/api/posts/${hash}/review`
      );
      setHash(hash);
      setPost(post);
    };

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

// utils file 
import { useLocation } from "react-router-dom";

export const getCurrentURL = () => {
  return document.URL;
};

export const useQuery = () => {
  const queryString = useLocation().search;

  return new URLSearchParams(queryString);
};

Dan Abramov写An infinite loop may also happen if you specify a value that always changes in the dependency array.

是这种情况吗？每个渲染上的query参考是否不同？为何eslint希望将其放入依赖项数组中？

他还说了removing a dependency you use (or blindly specifying []) is usually the wrong fix.，我通过禁用eslint规则来做到这一点。

有什么想法吗？

Answer 1

如果您真的想坚持不懈地提出建议，并使用useQuery钩子，这是另一种方法：

  // component file 
  const history = useHistory();
  const dispatch = useDispatch();
  const q = useQuery();
  const [query] = useState(q);
  const [post, setPost] = useState(null);
  const [hash, setHash] = useState(null);

  useEffect(() => {
    const fetchpost = async () => {
      const hash = query.get("hashed_id");
      const post = await fetchReviewPost(
        `/api/posts/${hash}/review`
      );
      setHash(hash);
      setPost(post);
    };

    fetchpost();
  }, [query]);

此时，query值在随后的函数调用中保持恒定。

但是，我要删除useQuery钩子，并将其内容直接放入fetchpost函数中。

为什么我的自定义挂钩会导致无限的数据重新获取？

1 个答案: