Невозможно получить доступ к данным о реагирующих реквизитах, когда я пытаюсь получить к ним доступ. Получение ошибки TypeError

Question

Создатель действий Redux срабатывает и отправляет запрос на мой сервер, а затем возвращает данные обратно в компонент React Lead. Но я могу получить доступ к данным для обновления пользовательского интерфейса. Когда я консольный журнал данных, он показывает, что это объект массива, но когда я пытаюсь получить доступ к данным в компоненте, используя map(), он возвращает реквизит ведет как undefined. Может ли это быть из-за проверки типа, которую я установил для входящего состояния?

Кроме того, когда я комментирую набор объектов проверки типа и пытаюсь получить доступ к данным объекта массива, я получаю ошибку TypeError: TypeError: props.leads is undefined, но я могу консоль записать его в журнал, и он показывает.

Почему я получаю undefined данные, когда пытаюсь получить к ним доступ, но записываю их в интерпретатор браузера, когда я только консоль регистрирую это? 1011 *

КОД ИСТОЧНИКА НИЖЕ

Действие Redux:

import GET_LEADS from './types';

// GET LEADS
export const getLeads = () => (dispatch) => {
    fetch('/api/leads/')
    .then((response) => {
        if (response.status != 200) {
            throw new Error(response.statusText);
        }

        return response.json();
    })
    .then((res) => {
        dispatch({
            type: GET_LEADS,
            payload: res
        });
    })
    .catch((err) => {
        console.log(err)
    });
}

Редукторы Redux

Ведущий редуктор:

import { GET_LEADS } from '../actions/types';

const initialState = {
    leads: []
};


export default function leads(state=initialState, action) {
    switch (action.types) {
        case GET_LEADS:
            return {
                ...state,
                leads: action.payload
            };
        default:
            return state;
    }
}

Комбинированный редуктор:

import { combineReducers } from 'redux';
import leads from './leads';

const rootReducer = combineReducers({
    leads: leads
});

export default rootReducer;

Компонент React Leads (контейнер, потому что он соединяется с redux):

import React, {useEffect} from 'react';

import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';

import PropTypes from 'prop-types';

import { getLeads } from '../../actions/leads';

export function Lead(props) {

    useEffect(() => {
        props.getLeads();
    },[]);

    return (
        <React.Fragment>
            <div className="table-responsive-lg">
                <table className="table table-hover table-sm shadow-sm">
                    <thead>
                        <tr>
                            <th scope='col'>ID</th>
                            <th scope='col'>Title</th>
                            <th scope='col'>F-Name</th>
                            <th scope='col'>M-Name</th>
                            <th scope='col'>L-Name</th>
                            <th scope='col'>Phone</th>
                            <th scope='col'>Company</th>
                            <th scope='col'>Website</th>
                            <th scope='col'>Address</th>
                            <th scope='col'>Addr_1</th>
                            <th scope='col'>Addr_2</th>
                            <th scope='col'>Addr City</th>
                            <th scope='col'>Addr State</th>
                            <th scope='col'>Addr Country</th>
                            <th scope='col'>Sale Rep</th>
                            <th scope='col'>Status</th>
                            <th scope='col'>Priority</th>
                        </tr>
                    </thead>
                    <tbody>
                        {props.leads[0].map(lead => (   // <---- TypeError: props.leads is undefined
                            <tr key={lead.id}>
                                <td>{lead.id}</td>
                            </tr>
                        ))}
                        {console.log(props.leads)}
                    </tbody>
                </table>
            </div>
        </React.Fragment>
    );
}

Lead.propTypes = {
    leads: PropTypes.array.isRequired, // <--- type checking for array object
    getLeads: PropTypes.func.isRequired
};


const mapDispatchToProps = (dispatch) => bindActionCreators({getLeads}, dispatch);
const mapStateToProps = (state) => ({ leads: state.leads.leads });
export default connect(mapStateToProps, mapDispatchToProps)(Lead);

Answer 1

Я думаю, что в операторе switch есть опечатка, это должно быть switch(action.type) без 's, поэтому при запуске действия он не может найти соответствующий тип действия в редукторе, а данные не загружаются в хранилище приращений

Answer 2

Попробуйте:

В теге tbody

{props.leads && props.leads[0].map(  
                            <tr key={lead.id}>
                                <td>{lead.id}</td>
                            </tr>
                        ))}