Question

为什么缺少依赖问题

const [ comments, setComment ] = useState([])

    const fetchComments = async () => {
        const res = await axios.get(`http://localhost:4001/posts/${postid}/comments`);
        setComment(res.data);
    }

    useEffect(() => {
        fetchComments();
    }, [postid]);

    console.log("IsArray", Array.isArray(comments)); // Returns me true, true, true then warning after warning it become false, false

为什么它表现得如此，我对帖子列表也采取了同样的方法，它确实可以正常工作，但是使用特定的ID进行获取则会向我发送错误消息。请指导

Answer 1

这是错误的错误。由于useEffect在其回调函数中使用fetchComments，因此有一些解决方法。

通过useCallback包装fetchComments，然后在依赖项数组中包含fetchComments

 const fetchComments = useCallback(async () => {
        const res = await axios.get(`http://localhost:4001/posts/${postid}/comments`);
        setComment(res.data);
    },[postid])

    useEffect(() => {
        fetchComments();
    }, [fetchComments]);

在useEffect中定义了功能

 useEffect(() => {
    const fetchComments = async () => {
      const res = await axios.get(
        `http://localhost:4001/posts/${postid}/comments`
      );
      setComment(res.data);
    };
    fetchComments();
 }, [postid]);

禁用eslint错误（不推荐）

const fetchComments = async () => {
    const res = await axios.get(
      `http://localhost:4001/posts/${postid}/comments`
    );
    setComment(res.data);
  };
  useEffect(() => {
    // eslint-disable-next-line
    fetchComments();
}, [postid]);

Answer 2

“ postid”不是useEffect挂钩的直接依赖项。因此，要么将您的fetchComments函数移到useEffect钩子内（如下所示）

useEffect(() => {
   const fetchComments = async () => {
     const res = await axios.get(`http://localhost:4001/posts/${postid}/comments`);
     setComment(res.data);
   }
   fetchComments();
}, [postid]);

或添加fetchComments函数作为依赖项

useEffect(() => {
   fetchComments();
}, [fetchComments]);

Answer 3

提供给useEffect的参数意味着，只要参数更改，useEffect中的函数就会运行。因此，useEffect依赖于该参数。

此处，您提供 postid 作为useEffect的依赖项，但未在useEffect中使用它。因此，React提示 postid 在这里没有用，或者将 fetchComment 作为依赖项，或者从其中删除 postid 。

自此，您希望在更改 postid 时运行 fetchcomments ，您可以像这样简单地重写它。

const [ comments, setComment ] = useState([])

const fetchComments = async (postid) => {
    const res = await axios.get(`http://localhost:4001/posts/${postid}/comments`);
    setComment(res.data);
}

useEffect(() => {
    fetchComments(postid);
}, [postid]);

React Hook useEffect缺少依赖项：'fetchComments'。包括它或删除依赖项数组

3 个答案: