javascript - 通过props react JS Access Data JSON

我的数据当前为JSON格式，并且已成功填充到名为foxFooterData的道具中。

当我console.log foxFooterData.data时，您会看到以下内容：

我正在尝试访问您在对象中看到的foxFooterCopyright文本。

我以为{this.props.foxFooterData.data.foxFooterCopyright}可以，但是没有运气。

这也是数据通过时的真实表示：



编辑-使用额外的代码更新：

减速器：

export default function reducer(state={
    data: {},
    fetching: false,
    fetched: false,
    error: null,
}, action) {
    switch (action.type) {
        case "FETCH_FOXFOOTER_DATA": {
            return {...state, fetching: true}
        }
        case "FETCH_FOXFOOTER_DATA_COMPLETE": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                data: action.payload
            }
        }
        case "FETCH_FOXFOOTER_DATA_FAILED": {
            return {...state, fetching: false, error: action.payload}
        }
    }

    return state

}

行动：

import axios from 'axios';

export function fetchFoxFooterData() {
    return function(dispatch) {
        axios.get('http://localhost:8888/public/api/globals/foxFooterLegal.json')
        .then((response) => {
            dispatch({type: "FETCH_FOXFOOTER_DATA_COMPLETE", payload: response.data})
        })
        .catch((err) => {
            dispatch({type: "FETCH_FOXFOOTER_DATA_FAILED", payload: err})
        })
    }
}

容器组件：

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

//Actions
import {fetchAdProductsData} from '../../actions/adProductsActions';
import {fetchListAdProductData} from '../../actions/listAdProductsActions';
import {fetchFoxFooterData} from '../../actions/foxFooterActions';

//Components
import Header from '../../components/Header';
import HeroModule from '../../components/HeroModule';
import ProductCategoryLeft from '../../components/ProductCategoryLeft';
import ProductCategoryRight from '../../components/ProductCategoryRight';
import ProductCategoryNavigation from '../../components/ProductCategoryNavigation';
import HeroDetail from '../../components/HeroDetail';
import ShowcaseModule from '../../components/ShowcaseModule';
import NewsModule from '../../components/NewsModule';
import ContactModule from '../../components/ContactModule';
import Footer from '../../components/Footer';

@connect((store) => {
    return {
        listAdProductsData: store.ListAdProductsData.data,
        adProductsData: store.AdProductsData.data,
        foxFooterData: store.FoxFooterData.data
    }
})

class AdProducts extends React.Component {

    componentWillMount() {
        //Fetch Ad Products Data
        //this.props.dispatch(fetchAdProductsData())


        //Fetch List Ad Products Data
        this.props.dispatch(fetchListAdProductData())

        //Fetch Fox Footer Data
        this.props.dispatch(fetchFoxFooterData())

    }

    render() {
        console.log("DATA", this.props.foxFooterData.data.data[0].foxFooterCopyright);
        return (
            <div className="ad-products-wrap container no-padding col-xs-12">
                <Header />
                <HeroModule />
                <HeroDetail />
                <ProductCategoryLeft />
                <ProductCategoryNavigation />
                <ProductCategoryRight />
                <ShowcaseModule />
                <NewsModule />
                <ContactModule />
                <Footer />
            </div>
        )
    }
}

export default AdProducts

最佳答案

请记住完整路径以及区分大小写。

this.props.FoxFooterData.data.data[0].foxFooterCopyright