Question

组件未显示。我没有收到任何错误消息。我试图从URL提取数据，并根据该数据在PollList上构建一个简单列表。我可以从动作中进行console.log（polls），并且可以正常工作，但是它不能建立列表

这是代码。

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;

希望有帮助！

组件未显示

1 个答案: