javascript - React JS 通过 props 访问数据 JSON

Question

我的数据当前采用 JSON 格式，并已成功填充到名为 foxFooterData 的属性中。

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

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

我认为这样做 {this.props.foxFooterData.data.foxFooterCopyright} 会起作用，但没有运气。

这也是数据传输时的真实表示:

编辑 - 使用额外代码更新:

reducer :

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

Answer 1

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

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