我應該如何修復 eslint 警告（React Hook useEffect 缺少依賴項）和由警告引起的循環？

Question

在下面的代碼中，eslint 會給出警告。

Line 24:6:  React Hook useEffect has a missing dependency: 'fetchPosts'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

import { useState, useEffect } from 'react';
import { useLocation } from "react-router-dom";
import { Layout } from './Layout';
import { TwitterPost, reloadTwitterEmbedTemplate } from '../TwitterPost';
import '../../styles/pages/TimelinePage.css'
import axios from 'axios';

export const TimelinePage = () => {
  const [posts, setPosts] = useState([]);
  const [page, setPage] = useState(1);
  const location = useLocation();

  const fetchPosts = async () => {
    const res = await axios.get('/api/posts', { params: { page: page } });
    setPosts(posts.concat(res.data));
    reloadTwitterEmbedTemplate();
    setPage(page + 1);
  };

  useEffect(() => {
    if (location.pathname !== '/') return;

    fetchPosts();
  }, [location]);

  const postTemplates = posts.map((post: any) => {
    if (post.media_name === 'twitter') return <TwitterPost mediaUserScreenName={post.media_user_screen_name} mediaPostId={post.media_post_id} />;
    return null;
  });

  return(
    <Layout body={
      <div id="timeline">
        <div>{postTemplates}</div>
        <div className="show-more-box">
          <button type="button" className="show-more-button" onClick={fetchPosts}>show more</button>
        </div>
      </div>
    } />
  );
};

我通過添加fetchPosts修復了警告。 然后我按照 eslint 指令使用useCallback並將fetchPosts中使用的變量添加到 deps。 此更改會導致循環。 我應該如何修復循環和 eslint 警告？

import { useState, useEffect, useCallback } from 'react';
import { useLocation } from "react-router-dom";
import { Layout } from './Layout';
import { TwitterPost, reloadTwitterEmbedTemplate } from '../TwitterPost';
import '../../styles/pages/TimelinePage.css'
import axios from 'axios';

export const TimelinePage = () => {
  const [posts, setPosts] = useState([]);
  const [page, setPage] = useState(1);
  const location = useLocation();

  const fetchPosts = useCallback(async () => {
    const res = await axios.get('/api/posts', { params: { page: page } });
    setPosts(posts.concat(res.data));
    reloadTwitterEmbedTemplate();
    setPage(page + 1);
  }, [page, posts]);

  useEffect(() => {
    if (location.pathname !== '/') return;

    fetchPosts();
  }, [location, fetchPosts]);

  const postTemplates = posts.map((post: any) => {
    if (post.media_name === 'twitter') return <TwitterPost mediaUserScreenName={post.media_user_screen_name} mediaPostId={post.media_post_id} />;
    return null;
  });

  return(
    <Layout body={
      <div id="timeline">
        <div>{postTemplates}</div>
        <div className="show-more-box">
          <button type="button" className="show-more-button" onClick={fetchPosts}>show more</button>
        </div>
      </div>
    } />
  );
};

Answer 1

我強烈推薦這篇文章來真正了解使用 useEffect 掛鈎時發生了什么。 除其他事項外，它還討論了您的確切問題和解決方法。 也就是說，您應該在 useEffect 回調中移動 function ，例如：

export const TimelinePage = () => {
  /* ... */

  useEffect(() => {
    if (location.pathname !== '/') return;
    const fetchPosts = async () => {
        const res = await axios.get('/api/posts', { params: { page: page } });
        setPosts(posts.concat(res.data));
        reloadTwitterEmbedTemplate();
        setPage(page + 1);
    }
    fetchPosts();
  }, [location]);

  /* ... */
};