我的应用程序的“React Hook useEffect 缺少依赖项”警告答案

【问题标题】：My App's "React Hook useEffect has a missing dependency" warning我的应用程序的“React Hook useEffect 缺少依赖项”警告
【发布时间】：2021-01-13 10:03:36
【问题描述】：

我有一个简单的应用程序，用于按艺术家搜索专辑数据库。
三个组件：App、AlbumList、AlbumSearch。

App 组件定义getAlbumsByArtist 来获取和更新相册，并将专辑作为道具传递给 AlbumList。

App 定义 getAlbumsByArtist 作为 props 传递给 AlbumSearch。在AlbumSearch中，当艺人更换时，我使用Effect调用getAlbumsByArtist。

该应用程序有效，但在 AlbumSearch 中我收到警告 React Hook useEffect 缺少依赖项：'getAlbumsByArtist'。

如何重构以修复此警告？

import React, { useState, useEffect } from "react";

function App() {
  const [albums, setAlbums] = useState(false);

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

  function getAlbums() {
    fetch("http://localhost:3001")
      .then((response) => response.json())
      .then((data) => setAlbums(data));
  }

  function getAlbumsByArtist(artist) {
    fetch(`"http://localhost:3001"/albums?artist=${artist}`)
      .then((response) => response.json())
      .then((data) => setAlbums(data));
  }

  return (
    <div>
      <h2>Albums</h2>
      <AlbumSearch getAlbumsByArtist={getAlbumsByArtist} />
      <AlbumList albums={albums} />
    </div>
  );
}

function AlbumSearch({ getAlbumsByArtist }) {
  const [artist, setArtist] = useState("");

  useEffect(() => {
    getAlbumsByArtist(artist);
  }, [artist]);

  const handleArtist = (e) => {
    e.preventDefault();
    setArtist(e.target.value);
  };

  return (
    <div className={`album-search ${showSearchClass}`}>
      <div>
        <label>Artist contains: </label>
        <input
          id="searchArtist"
          type="text"
          value={artist}
          onChange={handleArtist}
        />
      </div>
    </div>
  );
}

function AlbumList({ albums }) {
  return (
    <div>
      <header>
        <div>Id</div> <div>Artist</div> <div>Title</div>{" "}
      </header>
      <div>
        {albums &&
          albums.map((album) => {
            return (
              <div key={album.id}>
                <div>{album.id}</div>
                <div>{album.artist}</div>
                <div>{album.title}</div>
              </div>
            );
          })}
      </div>
    </div>
  );
}

【问题讨论】：

添加 getAlbumsByArtist 作为依赖项？
哇，成功了，谢谢。但是 getAlbumsByArtist 会成为一个依赖项似乎很奇怪，因为它不会改变。我认为 useEffect 的目的是监控发生变化的事情。
它是作为道具进来的。你可能知道它不会改变，但 React 不知道。您的组件可以与不同的/更改的 getAlbumsByArtist 函数一起使用。
但是 getAlbumsByArtist 是函数而不是状态，为什么它在依赖项数组中是必需的？
OP 和 @BoussadjraBrahim getAlbumsByArtist 在每次 App 重新渲染时重新声明，即当 albums 更新时。 OP 可以使用 useCallback 来记忆传递的回调，尽管这不能解决 esLint 问题标记。

标签： reactjs react-hooks eslint

【解决方案1】：

由于 react 将保证 setState() 函数永远不会改变，您只需将 getAlbumsByArtist 函数添加到您的 useEffect() 依赖项即可获得相同的结果。

useEffect(() => {
    getAlbumsByArtist(artist);
  }, [getAlbumsByArtist, artist]);

另一种方法是通过以下方式简单地忽略警告：

useEffect(() => {
   getAlbumsByArtist(artist);
}, [getAlbumsByArtist, artist]); // eslint-disable-line react-hooks/exhaustive-deps

【讨论】：