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

Question

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

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

另外，关于如何根据类型获取数据有什么建议吗？假设如果我单击 Action 类型，则会呈现类型电影的列表。

这是我的代码

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;

Answer 1

当您分派(dispatch)操作时，您的代码中存在一个小拼写错误，导致 reducer 未处理正确的状态。

正确的代码；

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>
      ));

Working demo