Javascript React JS通过道具访问数据JSON

我的数据当前为JSON格式，并已成功填充到名为

foxFooterData

的道具中

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

我正在尝试访问您在对象中看到的FoxFooter版权文本

我以为做

{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

从“React”导入React；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
//行动
从“../../actions/adProductsActions”导入{fetchAdProductsData}；
从“../../actions/listAdProductsActions”导入{fetchListAdProductData}；
从“../../actions/foxFooterActions”导入{fetchFoxFooterData}；
//组成部分
从“../../components/Header”导入标题；
从“../../components/HeroModule”导入HeroModule；
从“../../components/ProductCategoryLeft”导入ProductCategoryLeft；
从“../../components/ProductCategoryRight”导入ProductCategoryRight；
从“../../components/ProductCategoryNavigation”导入ProductCategoryNavigation；
从“../../components/HeroDetail”导入HeroDetail；
从“../../components/ShowcaseModule”导入ShowcaseModule；
从“../../components/NewsModule”导入新闻模块；
从“../../components/ContactModule”导入ContactModule；
从“../../components/Footer”导入页脚；
@连接（（存储）=>{
返回{
listAdProductsData:store.listAdProductsData，
adProductsData:store.adProductsData.data，
foxFooterData:store.foxFooterData.data
}
})
类AdProducts扩展了React.Component{
组件willmount（）{
//获取广告产品数据
//this.props.dispatch（fetchAdProductsData（））
//获取列表广告产品数据
this.props.dispatch（fetchListAdProductData（））
//获取Fox页脚数据
this.props.dispatch（fetchFoxFooterData（））
}
render（）{
console.log（“DATA”，this.props.foxFooterData.DATA.DATA[0].foxFooterCopyright）；
返回(
)
}
}
导出默认AdProducts

请记住完整路径，并且它区分大小写

---

this.props.FoxFooterData.data.data[0]。foxfooter版权所有

请记住完整路径，并且它区分大小写

---

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

根据您的图形，

foxFooterCopyright

键的完整对象路径为：

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

---

根据您的图形，

foxFooterCopyright

键的完整对象路径为：

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

---

将此生命周期挂钩添加到您的代码中，将在您的道具注入组件后立即触发

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

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

 }

}

---

将此生命周期挂钩添加到您的代码中，将在您的道具注入组件后立即触发

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

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

 }

}

---

---

---

提示西部最快的枪。。。还有1000次编辑。仍然没有运气，欢迎任何答案！connect函数中的

console.log（store.FoxFooterData）

的输出是什么？

props.foxFooterData

的输出是什么。Console.log这个在render中。@MartinDawson连接函数中没有任何内容-我不认为你可以在那里登录。渲染中的另一个this.props.foxFooterData返回数据/objectCue西部最快的枪。。。还有1000次编辑。仍然没有运气，欢迎任何答案！connect函数中的

console.log（store.FoxFooterData）

的输出是什么？

props.foxFooterData

的输出是什么。Console.log这个在render中。@MartinDawson连接函数中没有任何内容-我不认为你可以在那里登录。渲染中的另一个this.props.foxFooterData返回数据/object@filth你能展示更多的代码吗？特别是在您尝试访问数据的位置。尝试在我的容器中访问数据-我会将我的操作、缩减器和容器代码添加到原始postCan中，您可以尝试

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

trued-仍然是同一问题。。。我试过很多，不知道为什么会这样@filth您在

FoxFooterData

中的大写字母

F

正确吗？@filth您可以显示更多的代码吗？特别是在您尝试访问数据的位置。尝试在我的容器中访问数据-我会将我的操作、缩减器和容器代码添加到原始postCan中，您可以尝试

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

trued-仍然是同一问题。。。我试过很多，不知道为什么会这样@filth您在

FoxFooterData

中的大写字母

F

是否正确？无法读取未定义的属性“data”-请参阅下面关于其他答案的注释尝试

this.props.FoxFooterData[0]。foxFooterCopyright

和

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

ok第一个返回的foxFooterCopyright未定义，第二个返回的是无法读取未定义的属性“0”，请帮我一个忙

console.log（this.props.foxFooterData）

并粘贴它返回的内容。传递并返回空对象的对象无法读取未定义的属性“data”-请参阅下面关于其他答案的注释尝试

this.props.foxFooterData[0]。foxFooterCopyright

和

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

ok第一个返回的foxFooterCopyright未定义，第二个返回的是无法读取未定义的属性“0”，请帮我一个忙

console.log（this.props.foxFooterData）

并准确粘贴它返回的内容传递并返回一个空对象添加这些检查我做了，但仍然没有任何结果：-（它可以工作。在com中添加一个断点