我应该如何修复 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]);

  /* ... */
};