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响应数据

回答

相关问题