TypeError sur le tuto TP Recettes: Création d'une recette

galliot-arthur
Javascript React

Hello à tous.
Pas mon genre de demander de l'aide mais après 12h de panne, je seche !
J'ai une TypeError sur le tuto TP Recettes: Création d'une recette. React me sort cette erreur. Je ne fais que de chercher à droite, à gauche. Je suis allé jusqu'a copier coller caractère pour caractère les sources du TP. Rien à faire. :'(

Unhandled Rejection (TypeError): state.recipes is null

["  13 | case 'DESELECT_RECIPE':
  14 |     return {...state, recipeId: null }
  15 | case 'ADD_RECIPE':
> 16 |     return {...state, recipes: [action.payload, ...state.recipes] }
     | ^  17 | case 'SET_RECIPE':
  18 |     return {
  19 |         ...state,"](null)

En gros les recettes s'ajouter correcter à mon API qui est une API Platform. J'ai une réponse okay, avec la recette en retour, avec les bons champs, donc le payload est bon. Mais je n'arrive pas à débugger ce state.recipes.

Franchement je suis preneurs d'idées. Merci d'avance !

5 réponses

Orivoir21
Réponse acceptée

Bonjour, si tu utilise un reducer de redux pour manipulé ton state dans ta fonction reducer il faut que tu ajoute un cas default aprés tous les autre cas que tu traite, dans le cas default tu devrais retourné le state actuel sans le modifie:


// ...

case 'DESELECT_RECIPE':
    return {...state, recipeId: null }

case 'ADD_RECIPE':
    return {...state, recipes: [action.payload, ...state.recipes] }

// ...

default:
    return state

// ...

Redux emet des actions sur les reducers avec des types un peut special durant l'initialisation notamment si tu oublie de mettre le cas default tu retournera la valeur undefined pour ton state même si tu as géré toutes les actions que tu as èmise dans ton code, à cause des actions special qu'envoi Redux sur les reducers, il faut quand même ajouté le cas default.

MickaelTD

Hello, je ne sais pas à quoi ressemble le TP recette, mais la comme comme ça avec le bout de code je ne vois que 2 choses peut être 3

1 - Ta une action qui te vire ou met à null le membre recipes.
2 - Ton initialState à un membre recipes défini à null, exemple.

const initialState = {
    recipeId: null,
    recipes: null,
}

et dans ce cas oui ça plante, tu spread ...state.recipes qui est null, si c'est le cas intitalise le à un tableau vide [].
3 - Mais la c'est peut être le copié collé, ton case SET_RECIPE n'a pas d'accolade fermante.

Eventuellement je sais que c'est reservé au premium mais si une des 3 réponses ci-dessus ne corrige pas le pb, peux-tu coller ton reducer/actionsCreator je sais pas comment c'est fait dans le tp mais le fichier ou tu à les cases stp.

galliot-arthur
Auteur

Hello et merci pour vos réponses !
Je dois avouer que quelques jours après, j'ai mis le tuto un peu de côté, privilegiant une façon de faire un peu différente, sans Reducer.
J'y reviens depuis hier et le mode Update aujourd'hui fonctionne, en parallèle d'un useContext pour partager cet état de composant en composant, montés démontés, etc. Je pense que tu avais raison Orivoir, le problème venait surement d'un manque de default.

Bref, merci à vous deux pour votre soutien !
Arthur

graven007

ok pas de souci merci pour tout

graven007

j'en ai besoin aussi de cette reponse car j'ai le meme probleme