问题描述
我有一个简单的应用程序,用于按艺术家搜索专辑数据库。
三个组件:应用程序,专辑列表,专辑搜索。
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>
);
}
解决方法
由于react将保证setState()
函数永远不会改变,因此您只需将getAlbumsByArtist
函数添加到useEffect()
依赖项中即可获得相同的结果。
useEffect(() => {
getAlbumsByArtist(artist);
},[getAlbumsByArtist,artist]);
另一种方法是通过以下方式简单地忽略警告:
useEffect(() => {
getAlbumsByArtist(artist);
},artist]); // eslint-disable-line react-hooks/exhaustive-deps