我正在嘗試從電影資料庫中按流派獲取電影

我正在努力從 API 電影資料庫中按型別獲取電影。錯誤總是說“genres.map 不是函式”，或者當我嘗試呼叫 selectedGenre 以使用 document.GetElementById.value 獲取與每個流派關聯的電影時，它無法讀取 .value 的東西。我做錯了什么？提前謝謝你

const Discover = () => {
const navigate = useNavigate();
const [movies, setMovies] = useState([]);
const [genres, setGenres] = useState(''); 
const [searchTerm, setSearchTerm] = useState('');
const currentGenre = document.getElementById('genres').value;

    const FEATURED_API = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=9a7243213d79e4344f8f16ce3b6098cf`;
    const GENRES_API = 'https://api.themoviedb.org/3/genre/movie/list?api_key=9a7243213d79e4344f8f16ce3b6098cf';
    const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=9a7243213d79e4344f8f16ce3b6098cf&query='
    
    
    useEffect(() => {
        getMovies(FEATURED_API),
        getGenres(GENRES_API)
    }, []);
    
    const getGenres = (API) => {
        fetch(API)
            .then(res => res.json())
            .then((data) => {
                setGenres(data.genres);
                console.log(data.genres)
            })
    
    }
    
    const getMovies = (API) => {
        fetch(API)
            .then((res) => res.json())
            .then((data) => {
                setMovies(data.results);
                console.log(data.results);
            });
    };
    
    
    const handleOnSubmit = (e) => {
        e.preventDefault();
        if(currentGenre) {
            fetch(FEATURED_API   `&with_genres=${currentGenre}`)
                .then((res) => res.json())
                .then((data) => {
                    setMovies(data.results)
                    console.log(data.results)
                })
        }
        setGenres('')
        // navigate(`/genre/movie/list/${genres.name}`)
    }
    
    const handleOnChange = (e) => {
    
        // if(
        //     genres.id === movies.genres_ids
        // )
        setGenres(e.target.value)
        
    }
    // if(isFetching) return <Loader type='Loading films...'/>;
    // if (error) return <Error />;
    
    return (


<div className='flex flex-col'>.    
<div className='w-full flex justify-between items-center sm:flex-row flex-col mt-4 mb-10'>.    
<form onSubmit={handleOnSubmit}\>
<h2 className='font-bold text-3xl text-black text-left ml-4'>Discover</h2>
<select
   value={currentGenre}
   onChange={handleOnChange}
   className='mt-4 ml-3'id='genres'\>
      {genres.length > 0 &&genres.map((genre, i) => <option key={i} value={genres}>{genre.name}</option>)}
</select>
</form>
</div>


        <div className='flex flex-wrap sm:justify-start justify-center gap-8'>
        {movies.length > 0 &&
          movies.map((movie) => <FilmCard key={movie.id} {...movie} />)}
        </div>
    </div>


)}



export default Discover

uj5u.com熱心網友回復：

我會首先以不同的方式構造資料獲取，更緊湊的東西..

喜歡：

export const useData = (url) => {
  const [state, setState] = useState();

      useEffect(() => {
        const dataFetch = async () => {
          const data = await (await fetch(url)).json();
    
          setState(data);
        };
    
        dataFetch();
      }, [url]);
    
      return { data: state };
    };

也許也有錯誤處理，例如：

function App() {
    const [state, setState] = useState([])

    const [hasError, setHasError] = useState(false)
    const {loading, setLoading} = useState(false)

    useEffect(() => {
        setLoading(true)
        fetch("/api/data").then(
            res => {
                setState(res.data);
                setLoading(false)}
        ).catch(err => {
            setHasError(true))
            setLoading(false)})
    }, [])
    return (
        <>
            {
                loading ? <div>Loading...</div> : hasError ? <div>Error occured.</div> : (state.map( d => <div>{d}</div>))
            }
        </>
    )
}

希望對你有幫助，加油！

標籤：反应api

上一篇：在反應中洗牌

下一篇：ClassicUPS3NameError：未定義名稱“unicode”