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

问题描述

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

App 组件定义getAlbumsByArtist获取和更新专辑，并将专辑作为 prop 传递给 AlbumList。

应用程序定义getAlbumsByArtist作为道具传递给 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>
  );
}

标签： reactjsreact-hookseslint

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

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

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

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

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

问题描述

解决方案

推荐阅读