Question

我的数据目前采用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

Answer 1

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

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

Answer 2

根据您的图形，foxFooterCopyright键的完整对象路径为：

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

Answer 3

将这个生命周期钩子添加到你的代码中，一旦你的道具被注入你的组件就会被触发

componentWillReceiveProps(newProps){
 if(newProps.foxFooterData && newProps.foxFooterData.data && 
   newProps.foxFooterData.data.length){

   console.log("DATA", this.props.foxFooterData.data[0].foxFooterCopyright);

 }

}

通过道具反应JS Access Data JSON

3 个答案: