React-Reduxで入れ子になったJSONオブジェクトを取り出す方法は？

Question

私はまだReact-Reduxを学んでいます。単純なJSON配列/オブジェクトを取得する方法を理解しています。しかし、ネストしたオブジェクトを呼び出す方法がわかりません。これがバンドルされていると、私はdata.afterを呼び出しているため、 'after'オブジェクト（t3_5t61fz）を表示していますが、data.titleを実装しようとすると何も表示されません。私はタイトルをつかむしようとしていますし、コンソールでこれを見ています：

• オブジェクト
  • データ：オブジェクト
    • データ：オブジェクト
      • データ：オブジェクト
        • after： "t3_5t61fz" before：nullchildren：Array [25]
          • 0：オブジェクト
            • データ：オブジェクト
              • タイトル：
    "GoogleはWebフレームワークを構築する方法"

リデューサー：

export default function reducer(state={ 
    data: { 
     data: {} 
    }, 
    fetching: false, 
    fetched: false, 
    error: null, 
    }, action) { 

    switch(action.type){ 
     case "FETCH_DATA":{ 
     return {...state, fetching:true} 
     } 
     case "FETCH_DATA_REJECTED":{ 
     return {...state, fetching: false, error: action.payload} 
     } 
     case "FETCH_DATA_FULFILLED":{ 
     return {...state, fetching: false, fetched: true, data: action.payload} 
     } 
     case "ADD_DATA":{ 
     return {...state, data: [...state.data, action.payload]} 
     } 
     case "UPDATE_DATA":{ 
     const { id, title } = action.payload 
     const newData = [...state.data] 
     const dataToUpdate = newData.findIndex(data => data.id === id) 
     newData[dataToUpdate] = action.payload; 

     return {...state, data: newData} 
     } 
     case "DELETE_DATA":{ 
     return {...state, data: state.data.filter(data => data.id !== action.payload)} 
     } 
    } 
    return state 
    } 

アクション

import axios from 'axios'; 


export function fetchData(){ 
    return function(dispatch){ 
    axios.get("https://www.reddit.com/r/webdev/top/.json") 
    .then((response) => { 
     dispatch({ type: "FETCH_DATA_FULFILLED", payload: response.data}) 
    }) 
    .catch((err) => { 
     dispatch({type: "FETCH_DATA_REJECTED", payload: err}) 
    }) 
    } 
} 

export function addData(id, text){ 
    return { 
    type: 'ADD_DATA', 
    payload:{ 
     id, 
     data, 
    }, 
    } 
} 

export function updateData(id, text){ 
    return { 
    type: 'UPDATE_DATA', 
    payload: { 
     id, 
     data, 
    }, 
    } 
} 

export function deleteData(id){ 
    return { 
    type: 'DELETE_DATA', 
    payload: id 
    } 
} 

Layout.js

import React from "react" 
import { connect } from "react-redux" 

import { fetchData } from "../actions/dataActions" 

@connect((store) => { 
    return { 
    data: store.data.data 
    }; 
}) 
export default class Layout extends React.Component { 
    componentWillMount() { 
    this.props.dispatch(fetchData()) 
    } 


    render() { 
    const { data } = this.props; 


    return <div> 
     <h1>{data.data.after}</h1> 
    </div> 
    } 
} 

Answer 1

は私がdata.after呼び出すことが、私はdata.title何を実装しないようにしようとしたときに表示されるよ

私はdata.afterが配列であることがわかり、そしてあなたが最初の項目のデータのタイトルを取得しようとしていますその配列で

あなたは、データが非常に深くかかわらず、このようにネストされている理由好奇心{data.data.after[0].data.title}

イムを取得することによって、あなたの<h1>内のデータにアクセスすることができるはずです。