React-Redux - Ошибка разбора: нельзя использовать ключевое слово «await» вне функции asyn c

Question

Я работаю над приложением React и использую Redux для хранения состояния. У меня есть следующий код:

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

В моем fetchCategoryRanks создателе действий я перебираю массив menu, который задан в качестве параметра этой функции. Для каждого объекта категории в меню я отправляю информацию об этой категории на сервер, делая запрос PUT с использованием fetch.

Однако я получаю следующую ошибку:

Я не уверен, почему я получаю эту ошибку или как ее устранить. Любые идеи приветствуются.

Answer 1

Я думаю, что ошибка самоочевидна. Вы не можете использовать ключевое слово await внутри функции, которая не является asyn c. Функция asyn c возвращает обещание, которое позволяет нам использовать в нем await. Вы можете узнать больше об asyn c функциях здесь здесь

Попробуйте изменить код на этот

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

Answer 2

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