Question

我还在学习React-Redux。我理解如何检索简单的JSON数组。但是，我不知道如何调用嵌套对象。我想抓住标题并在控制台中查看：

对象
- 数据：对象
  - 数据：对象
    - 数据：对象
      - 后：nullchildren：前 “t3_5t0hy2” 阵列[25]
        
        0：对象
        
        数据：对象
        
        标题：“我在我建立的每个网站上使用的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（component）

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将自动更新或呈现，您可以编写逻辑。

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

1 个答案: