Javascript 如何使用redux连接动作、减缩器和组件以显示数据？

我有由axios获取的数据，这些数据包括场馆以及场馆的位置和名称。我想在里面显示位置和地点，例如：

{this.props.victions.data[0].attributes.name}

{this.props.victions.data[0].attributes.place.location[1]}

它们在VenueList.js中都不起作用

如何显示

中的数据

venueReducer.js：

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

const initialState = {
    items: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_VENUES:
            return {
                ...state,
                items: action.payload
            };
        default:
            return state;
    }
}

venueAction.js：

import { FETCH_VENUES } from './types';
import axios from 'axios';

export const fetchVenues = () => dispatch => {
    axios.get(`api_link`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues.data
        })
    )
    .catch( error => {
        console.log(error);
    });
};

VenueList.js：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, Image, FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import { fetchVenues } from '../actions/venueAction';

class VenueList extends Component {

    componentWillMount () {
        this.props.fetchVenues();
    }

    render() {

    console.log(this.props.venues)

        return (
            <View style={styles.container}>
                <View style={styles.boxcontainer}>
                    <Image
                    style={styles.img}
                    source={{ uri: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image' }}
                    />
                    <View style={styles.card}>
                        <Text>
                            <Text style={styles.title}> {this.props.venues.data[0].attributes.name} </Text>
                            <Text style={styles.location}> / {this.props.venues.data[0].attributes.place.location[0]} </Text> 
                        </Text>
                    </View>
                </View>
            </View>
        );
    }
}  

const mapStateToProps = state => ({
    venues: state.items
})

export default connect (mapStateToProps, { fetchVenues })(VenueList);

---

我想在

内显示场馆名称

巴拉斯蒂海滩

和位置

滨海湾

问题出在这里axios.get（

api\u link

）

使用模板文本时，需要使用${}打印值

应该如此

axios.get(`${api_link}`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues.data
        })
    )
    .catch( error => {
        console.log(error);
    });

但不是

axios.get(`api_link`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues.data
        })
    )
    .catch( error => {
        console.log(error);
    });

---

您是否在根级别添加了提供者包装（来自

react redux

package）？@MeetZaveri yesy您的代码看起来不错。您没有从this.props.vitentials获取数据吗？@请仔细检查这一点，我应该在哪里看到console.log（）？您尝试过这个{this.props.vitentials&&this.props.vitentials.data[0].attributes.name}

axios.get(`api_link`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues.data
        })
    )
    .catch( error => {
        console.log(error);
    });