Question

我有axios提取的数据，该数据包含具有地点和地点名称的地点。我想在其中显示位置和地点，例如：<Text style={styles.title}> {this.props.venues.data[0].attributes.name} </Text>

<Text style={styles.title}> {this.props.venues.data[0].attributes.place.location[1]} </Text>都不能在VenueList.js中使用

如何显示<Text></Text>内部的数据？

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);

示例数据：

{
  "data": [
    {
      "type": "venues",
      "id": "nb",
      "attributes": {
        "name": "Barasti Beach",
        "description": "Barasti Beach is lotacated in the awesome barasti beach",
        "price_range": "$$$",
        "opening_hours": "10:30-12:40/16:00-2:00",
        "organization": {
          "id": "GD",
          "legal_name": "Barasti",
          "brand": "Barasti"
        },
        "place": {
          "address": "Le Meridien Mina Seyahi Beach Resort & Marina, Dubai Marina - Dubai - United Arab Emirates",
          "latitude": "25.092648",
          "location": [
            "Marina Bay",
            "Dubai",
            "Arab Emirate United"
          ]
        }
      }
    }
  ],
  "meta": {
    "total": 1,
    "cursor": {
      "current": 1,
      "prev": null,
      "next": null,
      "count": 25
    }
  }
}

我想在Barasti Beach中显示场所名称Marina Bay和位置<Text>。

Answer 1

问题出在这里axios.get（api_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);
    });

如何使用Redux连接动作，Reducer和组件以显示数据？

1 个答案: