React Hooks, useReducer n'est pas en mesure d'obtenir l'état

Question

Je suis en train de créer un composant simple pour essayer d'utiliser les hooks useEffect et useReducer. Tout semble fonctionner correctement, sauf que aucun des éléments du tableau ne parvient réellement dans le composant. J'ai ajouté des instructions console.log à l'intérieur des différentes fonctions et je peux voir que l'appel API réussit et que les données sont disponibles dans la portée de la fonction sous events. Cependant, tout ce qui est rendu est une boîte vide. Mon code est :

import React, { useReducer, useEffect } from "react";
import "./App.css";

const  App = () => {
  const [events, dispatch] = useReducer(
      (state, action) => { switch (action.type) {
          case "fetchEvents":
              state = [ ...state, action.data];
             return state;

            case "removeEvent":
              return state.filter((_, idx) => idx !== action.idx);

            default:
                console.log(state);
              return state;
        }
      },
  []);

  useEffect(async () => {
    const response = await fetch("https://easynode-veohkvapci.now.sh/api/test");
    const data = await response.json();
    dispatch({type: "fetchEvents", data});
  },[]);

  console.log(events, 'log events');

  return (

          {events.map((event, idx) => (

                  {event.name}
                  {event.date}
                  {event.description}
                 dispatch({ type: "removeEvent", idx})}>Supprimer l'événement

          ))}

  );
};

export default App;

Peut-être devrais-je appeler useEffect à l'intérieur de useReducer à la place ? Je pourrais être en train de faire quelque chose qui devrait se produire de manière asynchrone.

Answer 1

Les données que vous obtenez en retour de votre demande sont un tableau, donc vous devez vous assurer de les étaler également dans le cas de fetchEvents dans votre réducteur.

const [events, dispatch] = useReducer((state, action) => {
  switch (action.type) {
    case "fetchEvents":
      state = [...state, ...action.data];
      return state;

    case "removeEvent":
      return state.filter((_, idx) => idx !== action.idx);

    default:
      return state;
  }
}, []);