为什么我的API请求被调用了4次?

Question

我正在做一个api请求的项目，但我的请求被调用了4次，为什么会发生这种情况?

const [movies, setMovies] = useState([]);
const [searchTerm, setSearchTerm] = useState('')
useEffect(() => {
getMovies(FEATURED_API)

if (searchTerm) {
getMovies(SEARCH_API + searchTerm);
} else{
getMovies(FEATURED_API)
}
}, [searchTerm])

const getMovies = (API) => {
fetch(API)
.then((res) => res.json())
.then((data) => {
console.log(data)
setMovies(data.results)
})
}
const handleOnChange = (e) => {
setSearchTerm(e.target.value)
}```

Answer 1

在您的代码中，您在mount时调用getMovies(FEATURED_API)两次(一次在if cause之外，另一次在else中)。

useEffect(() => {
getMovies(FEATURED_API) // first call
if (searchTerm) {
getMovies(SEARCH_API + searchTerm);
} else{
getMovies(FEATURED_API) // second call because searchTerm is an empty string
}
}, [searchTerm])

和其他两个调用可能是因为你有StrictMode启用(它是启用默认与create-react-app)，你没有注意到它。StrictMode在开发模式下两次安装组件，以帮助您以更简单的方式检测代码中的问题。

你可以查看这个帖子的评论与一个更描述性的概念，StrictMode做什么。