Je travaille sur une application React et j'utilise Redux pour stocker l'état. J'ai le code suivant:

Menu.types.js:

export const FETCH_CATEGORY_RANKS = "FETCH_CATEGORY_RANKS";

Menu.actions.js:

    import { apiUrl, apiConfig } from '../../util/api';
    import { FETCH_CATEGORY_RANKS } from './menu.types';

    export const fetchCategoryRanks = menu => async dispatch => {
    console.log("Printing menu (fetch category ranks)");
    console.log(menu);

    menu.map(category => {
        const options = {
            ...apiConfig(),
            method: 'PUT',
            body: JSON.stringify(category)
        }
        const response = await fetch(`${apiUrl}/category/${category._id}`, options)
        let data = await response.json()
        if (response.ok) {
            console.log("It got sent")
        } else {
            alert(data.error)
        }
    });

    dispatch({ type: FETCH_CATEGORY_RANKS, menu });

}

Menu.reducer.js:

// import INITIAL_STATE from './menu.data';
import { FETCH_CATEGORY_RANKS } from './menu.types';

const INITIAL_STATE = []


export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case FETCH_CATEGORY_RANKS:
           return state;
        default:
            return state;
    }
}

Dans mon créateur d'action fetchCategoryRanks, je parcourt le tableau menu qui est donné en paramètre à cette fonction. Pour chaque objet de catégorie dans le menu, j'envoie des informations sur cette catégorie à un serveur en effectuant une requête PUT en utilisant fetch.

Cependant, j'obtiens l'erreur suivante:

enter image description here

Je ne sais pas pourquoi j'obtiens cette erreur ni comment la résoudre. Toutes les idées sont appréciées.

0
ceno980 22 avril 2020 à 06:30

2 réponses

Meilleure réponse
    menu.map(async (category) => { <--------
        const options = {
            ...apiConfig(),
            method: 'PUT',
            body: JSON.stringify(category)
        }
        const response = await fetch(`${apiUrl}/category/${category._id}`, options)
        let data = await response.json()
        if (response.ok) {
            console.log("It got sent")
        } else {
            alert(data.error)
        }
    });
0
Parvej Mallick 22 avril 2020 à 03:42

Je pense que l'erreur s'explique d'elle-même. Vous ne pouvez pas utiliser le mot clé await dans une fonction qui n'est pas asynchrone. La fonction async renvoie une promesse qui nous permet d'utiliser wait en elle. Vous pouvez en savoir plus sur les fonctions asynchrones ici ici

Essayez de changer votre code en ceci

menu.map(async (category) {
    const options = {
        ...apiConfig(),
        method: 'PUT',
        body: JSON.stringify(category)
    }
    const response = await fetch(`${apiUrl}/category/${category._id}`, options)
    let data = await response.json()
    if (response.ok) {
        console.log("It got sent")
    } else {
        alert(data.error)
    }
});
0
Azzam Asghar 22 avril 2020 à 03:36