时间戳

首页 > 解决方案 > 使用 useEffect 从 TMDB 获取流派列表，axios 卡在加载中

javascript - 使用 useEffect 从 TMDB 获取流派列表，axios 卡在加载中

问题描述

我正在创建我的第一个真正的反应应用程序，但我已经遇到了一些问题。

我想获取流派列表，但状态停留在加载中。

另外，关于如何根据流派获取数据的任何提示？假设如果我单击动作类型，则会呈现类型电影列表。

这是我的代码

import React, {useState, useEffect ,useReducer} from 'react';
import MovieCards from './components/MovieCards'
import axios from 'axios';
import './App.css';



const initialState = {
  loading: true,
  error: '',
  genres: {}
}

const reducer = (state, action) => {
  switch(action.type) {
    case 'FETCH_SUCCESS':
      return {
        loading: false,
        genres: action.payload,
        error: ''
      }
    case 'FETCH_ERROR':
      return {
        loading: false,
        genres: {},
        error: 'Error'
      }
    default:
      return state
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)
  useEffect(() => {
    axios
      .get('https://api.themoviedb.org/3/genre/movie/list?api_key=af1b76109560756a2450b61eff16e738&language=en-US')
      .then(response => {
        dispatch({
          type: "FETCH_SUCCES", payload: response.data
        })
      })
      .catch(error => {
        dispatch({ 
          type: "FETCH_ERROR" 
        })
      })
  }, [])
  return (
    <div>
      {state.loading ? 'Loading' : state.genres.genres.id}
      {state.error ? state.error : null}
    </div>
  )
}

export default App;

标签： javascriptreactjsreact-hooks

解决方案

当您调度一个动作时，您的代码中有一个小错字，导致减速器未处理正确的状态。

正确的代码；

dispatch({
          type: "FETCH_SUCCESS", payload: response.data // IT was FETCH_SUCCESS
        })

其次，您可以在列表中呈现您喜欢的流派数组，并将点击列表器附加到它并进行 API 调用

  state.genres.genres.map(g => (
        <div key={g.id} onClick={() => fetchMovies(g)}>
          {g.name}
        </div>
      ));

工作演示

推荐阅读