能够在控制台中查看 JSON 但不知道如何在视图中显示 - React-Redux

Question

我还在学习 React-Redux。我了解如何检索简单的 JSON 数组。但是，我不确定如何调用嵌套对象。我正在尝试获取标题并在控制台中查看：

• 对象
  • 数据：对象
    • 数据：对象
      • 数据：对象
        • 之后：“t3_5t0hy2”之前：nullchildren：数组[25]
          • 0：对象
            • 数据：对象
              • title:“我在我构建的每个网站上使用的 Google Analytics（分析）设置（作者 Philip Walton）”

dataAction.js

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,
      title,
    },
  }
}

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

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

Layout.js（组件）

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

import { fetchUser } from "../actions/userActions"
import { fetchPartner } from "../actions/projectActions"
import { fetchData } from "../actions/dataActions"

@connect((store) => {
  return {
    user: store.user.user,
    userFetched: store.user.fetched,
    partner: store.partner.partner,
    partnerFetched: store.partner.fetched,
    data: store.data.data
  };
})
export default class Layout extends React.Component {
  componentWillMount() {
    this.props.dispatch(fetchUser())
    this.props.dispatch(fetchPartner())
    this.props.dispatch(fetchData())
  }


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



    //const mappedData = data.map(data => <li>{data.title}</li>)

    return <div>
      <h1>{user.name}{user.age}</h1>
      <h1>{partner.title}</h1>
      <ul>{data.title}</ul>
    </div>
  }
}

Reducer.js

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
  }

解决此问题后，下一步将是遍历对象，我也不确定如何实现。

Answer 1

当您发送有效负载时：response.data 您可以在对象结构中更进一步并在有效负载中发送实际数据。

一旦你发送了有效载荷，你就需要一个会改变状态的 reducer。按照本教程了解如何创建减速器。 http://blog.scottlogic.com/2016/05/19/redux-reducer-arrays.html

然后，一旦状态更新，您将让代码从状态中读取值。一旦状态改变，React 将自动更新或渲染，你可以编写你的逻辑。