react-redux wie Antwortdaten von api

render Ich folgte einer der Anleitung von youtube. Wenn ich das tue, funktioniert es völlig in Ordnung. Aber wenn ich eine andere API ausprobiere, bekomme ich einen Fehler, die Elemente sind nicht definiert. Kann mir bitte jemand helfen zu verstehen, was ich falsch mache.react-redux wie Antwortdaten von api

Dank

// Aktionen

import axios from 'axios' 
export function fetchTweets(brandUrl, responseCode){ 
let url = brandUrl + '/api/offer/' + responseCode; 
return function(dispatch){ 
axios.get(url) 
    .then((response) => { 
    dispatch({ 
     type: 'FETCH_TWEETS_FULFILLED', 
     payload: response.data 
    }) 
    }) 
    .catch((error) => { 
    dispatch({ 
     type: 'FETCH_TWEETS_REJECTED', 
     payload: error 
    }) 
    }) 
} 
}

// Minderer

export default function reducer(state = { 
tweets: [], 
fetching: false, 
fetched: false, 
error: null 
}, action) { 
switch(action.type){ 
case 'FETCH_TWEETS_PENDING' :{ 
    return { ...state, fetching: true } 
} 
case 'FETCH_TWEETS_REJECTED' : { 
    return { ...state, fetching: false, error: action.payload } 
} 
case 'FETCH_TWEETS_FULFILLED' : { 
    return { ...state, 
    fetching: false, 
    fetched: true, 
    tweets: action.payload } 
} 
} 
return state 
}

// Hauptkomponente

import React from 'react' 
import { connect } from 'react-redux' 
import { fetchTweets } from '../actions/tweetsActions' 
class Layout extends React.Component{ 
fetchTweets(){ 
this.props.dispatch(fetchTweets(brandUrl, responseCode)) 
} 
render(){ 
const { tweets } = this.props; 
if(!tweets.length){ 
    return <button value="Load" onClick={this.fetchTweets.bind(this)}>Load </button> 
} 
console.log(tweets.response.mainItems.length) 
return (
    <div> 
    <p>{tweets.statusMessage}</p> 
    <ul> 
    </ul> 
    </div> 
); 
} 
} 
function mapStateToProp(state){ 
return { 
    tweets : state.tweets.tweets 
} 
} 
export default connect(mapStateToProp)(Layout)

// store

import { applyMiddleware, createStore } from 'redux' 
import thunk from 'redux-thunk' 
import promise from 'redux-promise-middleware' 
import logger from 'redux-logger' 
import reducer from './reducers' 
const middleware = applyMiddleware(promise(), thunk, logger()) 
export default createStore(reducer, middleware)

// API Antwort

Quelle

2017-03-06 Mesmerize86

Haben Sie das Debuggen Schritt für Schritt versucht? 1. Überprüfen Sie die Daten in Ihrer Aktion "Payload". 2. Überprüfen Sie die Daten Ihres Geschäfts, nachdem der Reducer die Aktion bearbeitet hat. 3. Überprüfen Sie den Wert der Requisite in Ihrer Komponente. Scheint, dass Sie einige Abweichungen in der Hauptkomponente haben. Sie rufen 'tweets.response.mainItems' für die Tweets auf, rufen jedoch' tweets.statusMessage' für die Statusmeldung auf. Das scheint ein bisschen aus. Vielleicht sollten Sie stattdessen nur 'tweets.mainItems' aufrufen? – VanDanic

Hallo @VanDanic Ich habe debuggen und alles sieht gut aus. Es druckt statusMessage. StatusMessage und Antwort sind auf der gleichen Ebene und MainItems ist die untergeordneten Elemente der Antwort. Wenn ich eine untergeordnete Eigenschaft aus der Antwort auswähle, wird ein Fehler ausgegeben. [Debug Image Link] (http://imgur.com/z0Flmfb) – Mesmerize86

in mapStateToProps Funktion der Hauptkomponente, warum Sie Tweets durch die Zuordnung state.tweets.tweets zugreifen, obwohl Sie haben Minderer genannt Tweets nicht, und Sie nicht verwenden combateReducer Funktion (die man im Falle von mehreren Reducer verwenden).
So können Sie leicht Tweets zugreifen, indem das Schreiben this.state.tweets .und Sie Zustand in mapStateToProps vor der Rückkehr drucken können, die für die Fehlersuche hilfreich sein könnte ......

//main component 
 
function mapStateToProp(state){ 
 
console.log(state,"=====>") 
 
return { 
 
    tweets : state.tweets 
 
}

Quelle

2017-03-27 12:05:24

react-redux wie Antwortdaten von api

Antwort

Verwandte Themen