單擊事件后如何觸發函數useEffect？

Question

最近正在學習 React 鈎子，現在正在做一個搜索應用程序，它必須調用 API，然后返回與我在搜索框中鍵入的內容相對應的列表電影。

我的代碼在這里：

使用Fetch.js

import { useState, useEffect } from 'react'

export const useFetch = (url, initialState) => {
    const [data, setData] = useState(initialState)
    const [loading, setLoading] = useState(true)
    useEffect(() => {
        async function fetchMovies() {
            const response = await fetch(url)
            const data = await response.json()
            setData(data.Search)
            setLoading(false)
        }
        fetchMovies()
    }, [url])

    return { data, loading }
}

應用程序.js

import React, { useState } from 'react'
import Search from './components/Search'
import Result from './components/Result'
import Loading from './components/Loading'
import { useFetch } from './utils/useFetch'

export default function App() {
    const [key, setKey] = useState('Iron man')
    const onSearch = (key) => {
        setKey(key)
    }
    const {data, loading} = useFetch(`https://www.omdbapi.com/?s=${key}&apikey=${API_KEY}`)

    return (
        <>
            <Search handleSearch={onSearch}/>
            <Loading isLoading={loading} />
            <Result movies={data}/>
        </>
    )
}

據我了解，單擊按鈕搜索函數調用 API 將被觸發並按預期返回結果。 我放不下

const {data, loading} = useFetch(`https://www.omdbapi.com/?s=${key}&apikey=${API_KEY}`)

在onSearch函數中。 遵循代碼 函數調用 API 會在應用程序啟動時自動調用並返回 undefined 作為結果。

任何人都可以幫助我並解釋原因嗎？

Answer 1

您對鈎子如何只能在反應組件的頂層調用的理解是正確的。 進行以下更改，API 不會在第一次被調用，但會在隨后被調用。

1. 使用 url 狀態變量並在組件外部提取generateUrl邏輯：

function generateUrl(key) {
  return `https://www.omdbapi.com/?s=${key}&apikey=${API_KEY}`
}

function MyComponent() {
  const [url, setUrl] = React.useState('');
  //...
}

2. 通過在 if 條件中包裝fetchMovies()調用來檢查useFetch鈎子中的url是否存在。 這樣，API 不會觸發，因為 url 的默認值為空。

import { useState, useEffect } from 'react'

export const useFetch = (url, initialState) => {
    const [data, setData] = useState(initialState)
    const [loading, setLoading] = useState(true)
    useEffect(() => {
        async function fetchMovies() {
            const response = await fetch(url)
            const data = await response.json()
            setData(data.Search)
            setLoading(false)
        }

        if(url) {
          fetchMovies()
        }
    }, [url])

    return { data, loading }
}

3. 最后，修改onSearch

const onSearch = (key) => {
   setUrl(generateUrl(key))
}

Answer 2

也許您可以通過以下方式公開setUrl ：

return { data, loading, onSearch: (key) => setUrl(generateUrl(key)) }