Question

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

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

App定义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>
  );
}

Answer 1

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

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

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

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

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

1 个答案: