Компонент не отображается

Question

Компонент не отображается.Я не получаю никаких сообщений об ошибках.Я пытаюсь получить данные из URL-адреса и создать простой список на основе PollList из этих данных.Я могу console.log (опросы) из действия, и он работает, но он просто не создает список

Вот код.

pollsactions.js

import { GET_POLLS, POLLS_LOADING } from './types';


export const getPolls = () => dispatch => {
    return fetch(URL)
        .then(res => res.json())
        .then(polls => {
            dispatch({
                type: GET_POLLS,
                payload: polls
            })
        })

}

pollsreducers.js

import {
    GET_POLLS,
    POLLS_LOADING
} from '../actions/types';



const pollReducer = (state = [], { type, payload }) => {
    switch (type) {
        case GET_POLLS:
            return payload
        default:
            return state
    }
}

export default pollReducer;

PollList.js

import React, { Component } from 'react'

import { connect } from 'react-redux'
import { getPolls } from '../redux/actions/pollsActions';

class PollList extends Component {

    componentDidMount() {
        this.props.getPolls();
    }

    render() {
        const { polls } = this.props.polls

        return (

            <div>
                {
                    polls && polls.map((poll) => (
                        <div key={poll.id}>

                            {(poll.type)}

                        </div>
                    ))
                }
            </div>

        )
    }
}

const mapStateToProps = state => ({
    polls: state.polls
});

export default connect(
    mapStateToProps,
    { getPolls }
)(PollList);     

Answer 1

Вы неправильно разрушаете polls.polls на this.props на основе вашего mapStateToProps(), а не на this.props.polls.Попробуйте изменить:

const { polls } = this.props.polls;

на:

const { polls } = this.props;

В противном случае без разрушения это будет выглядеть так:

const polls = this.props.polls;

Надеюсь, это поможет!