如何檢索React-Redux中的嵌套JSON對象？

Question

我還在學習React-Redux。我明白如何檢索簡單的JSON數組/對象。但是，我不知道如何調用嵌套對象。當它捆綁在一起時，我正在查看'after'對象 - t3_5t61fz - 顯然是因爲我正在調用data.after，但是當我嘗試實現data.title時，什麼也沒有顯示。我試圖抓住標題和我在控制檯中查看此：

• 對象
  • 數據：對象
    • 數據：對象
      • 數據：對象
        • 之後：「t3_5t61fz」之前：nullchildren：Array [25]
          • 0：對象
            • 數據：對象
              • 標題： 「谷歌如何建立一個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>數據。