为什么我的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

在您的代码中，您正在调用getMovies（prainured_api）在坐骑上两次（一个在之外的一个，另一个在 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> create-react-app-app），并且您尚未注意到它。 strictmode在开发模式下两次安装组件，以帮助您以更轻松的方式检测代码中的问题。

您可以检查此帖子评论具有更具描述性的概念。