Извлечение списка жанров из TMDB с использованием useEffect и ax ios, зависших при загрузке

Question

Я создаю свое первое реальное приложение реакции, и у меня уже есть некоторые проблемы.

Я хочу получить список жанров, но состояние застряло при загрузке.

Кроме того, какие-либо советы о том, как я могу получить данные в зависимости от жанра? Допустим, если я нажму на жанр боевика, появится список жанровых фильмов.

Вот мой код

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

Рабочая демонстрация