react-redux如何呈現API響應數據

我遵循YouTube上的教程之一。當我這樣做的時候，它工作得很好。但是，當我嘗試不同的api時，我得到一個錯誤項目沒有定義。有人能幫助我理解我做錯了什麼嗎？react-redux如何呈現API響應數據

由於

//動作

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 
    }) 
    }) 
} 
}

//減速器

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 
}

//主成分

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)

//商店

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中的主要成分的mapStateToProps功能，爲什麼你被分配state.tweets.tweets訪問微博，雖然你沒有減速命名鳴叫，並沒有使用響應

來源

2017-03-06 Mesmerize86

您是否嘗試逐步調試？ 1.檢查行動「有效載荷」中的數據。 2.在減速機處理完動作後檢查商店的數據。 3.檢查組件中道具的值。似乎你在主要組件中有一些差異。你正在爲tweets調用'tweets.response.mainItems'，但你可以爲狀態消息調用'tweets.statusMessage'。這似乎有點偏離。也許你應該只調用'tweets.mainItems'呢？ – VanDanic

你好@VanDanic我做了調試，一切都很好。它確實打印statusMessage。 StatusMessage和響應位於同一級別，mainItems是響應的子級。當我從響應中選擇任何子屬性時，它會引發錯誤。 [調試圖像鏈接]（http://imgur.com/z0Flmfb） – Mesmerize86

combineReducer功能（在多個減速器的情況下使用）。
所以，你可以很容易地通過編寫this.state.tweets。而且你可以在mapStateToProps打印狀態返回這可能是有用的調試之前訪問的鳴叫......

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

來源

2017-03-27 12:05:24

react-redux如何呈現API響應數據

回答

相關問題