0

У меня есть проблема. У меня есть работающий код, который имел бы отрисовать элементы. Дело в том, что у меня вообще в приложении есть 9 API запросов (это 9). Все компоненты работают, кроме этой компоненты. В консоль этой компоненты, данные я получаю. Скажите, я что-то неправильно делаю ли ограничения на количество запросов. Спасибо большое

import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {western_movies_are_loaded} from "../redux/action_creators";

export let Western = () => {

let dispatch = useDispatch();
let western_movies = useSelector(({movies_reducer : {western_movies}}) => western_movies);

let fetchWestern = async () => {
    try {
        let response = await fetch('https://api.sampleapis.com/movies/western');
        let json = await response.json();
        console.log(json);
        dispatch(western_movies_are_loaded(json));
    } catch (e) {
        console.log(e);
    }
}

useEffect(() => {
    fetchWestern()
},[])

return (<div>Western
    {western_movies.map(el => <div key={el.id}>
        <p>{el.title}</p>
                            </div>)}
        </div>)
}

Reducers.js

import {
WESTERN_MOVIES_LOADED
} from "./action_types";

let initialState = {
western_movies : []
}
let movies_reducer = (state = initialState, action) => {
switch (action.type) {
case WESTERN_MOVIES_LOADED: {
        return {
            ...state,
            western_movies: action.payload
        }
    }
default:
return state;
}
}
export default movies_reducer;

action_creators.js

import {
WESTERN_MOVIES_LOADED
} from "./action_types";
let western_movies_are_loaded = (payload) => ({type: WESTERN_MOVIES_LOADED, payload});
export {
western_movies_are_loaded
}
6
  • Возможно в редаксе проблема, данные добавляются и приходят из Редакса? Добавьте в компонент: console.log(western_movies, western_movies) 16 сен 2021 в 13:24
  • @KonstantinModin, да, я работаю с редаксом. 8 запросов у меня работают, 9 - нет. Я написал console.log(western_movies) и получил пустой массив 16 сен 2021 в 13:37
  • значит данные не попадают в редакс, добавь код редюсера и action 16 сен 2021 в 13:47
  • @KonstantinModin уже добавил 16 сен 2021 в 13:54
  • не вижу ошибки здесь, может проект есть на гитхабе, или в песочнице ? 16 сен 2021 в 13:58

2 ответа 2

1

Была опечатка в action_types. Должно быть:

let MYSTERY_MOVIES_LOADED = "MYSTERY_MOVIES_LOADED";
let WESTERN_MOVIES_LOADED = "WESTERN_MOVIES_LOADED";

Да и как совет: я бы поменял все let на const

2
  • Йомайо, целый день потратил на ошибку эту ... Большое спасибо))) 16 сен 2021 в 14:17
  • Пожалуйста, отметь ответ как правильный если всё ок (+лайк), спасибо. 16 сен 2021 в 14:28
0

Попробуй дописать проверку {western_movies && western_movies.map(el => <div key={el.id}>

Скорее всего на момент вызова метода map, масив western_movies пустой

4
  • спасибо, но не помогло... 16 сен 2021 в 13:36
  • Закинь fetchWestern в useEffect, попробуй так 16 сен 2021 в 13:43
  • У меня функция и запускается в useEffect, но ничего не дает. Если забросить всю функцию fetchWestern в useEffect, результат такой же ((( 16 сен 2021 в 13:47
  • Да, прости, не подумал 16 сен 2021 в 13:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.