如何映射返回的对象数组？当我单击按钮以获取博客时，我得到了此响应

image1 和 image 2

现在在我的应用程序 js 中，

import React from 'react';
import Blog from '../components/Blog';
import Form from '../components/Form';
import Root from '../components/Root';
import { Router, Route, IndexRoute, browserHistory} from 'react-router';
import axios from 'axios';
import { connect } from 'react-redux';

class App extends React.Component {

render(){

return(
	<Router history={browserHistory}>
	<Route path={'/'} component={Root}>
		<IndexRoute component={ () => (<Blog blog_posts={this.props.posts} fetchBlogs={this.props.fetchBlogs} />) } ></IndexRoute>
		<Route path={'/form'} component={Form}></Route>
	</Route>
	</Router>
);
}
}

const mapStateToProps = (state) => {
	return {
		posts: state.blogs
	};
};

const mapDispatchToProps = (dispatch) => {
return {
	fetchBlogs : () => {
	dispatch(
	{ type: "FETCHING_BLOG" },
	axios.get("https://jsonplaceholder.typicode.com/posts")
	.then( (response) => {
		dispatch({
			type: "FETCHING_SUCCESS",
			payload: response.data
		})
	} )
	.catch( (err) => {
		dispatch({
			type: "FETCHING_ERROR",
			payload: err
		})
	})
	);
	}
};
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

我正在将 posts 从 mapStateToProps （其中包含响应数据）通过 props 传递到 IndexRoute 中的博客组件中。

在我的博客组件中，我正在记录传递的 props（如上图所示）并且传递正常。现在是 blog_posts 。现在我正在映射 blog_posts ，但不起作用并返回 ncaught TypeError: Cannot read property 'map' of undefined 。请解释为什么它不起作用。也许 blog_post 应该包含另一个数组，值应该存储在那里？？？请解释我做错了什么

我的博客组件：

import React from 'react';

class Blog extends React.Component {
render(){
	console.log("Passed", this.props);
	
	let b = this.props.blog_posts.map(item => {
		console.log(item)
	});
	
	return(
	<div>
		<button onClick={() => this.props.fetchBlogs()}>Fetch Users!</button>
	</div>
	);
}
}

export default Blog;

reducer：

const initBlogState = {
	fetching: false,
	fetched: true,
	blogs: [],
	error: null
};

export default function blogReducer (state = initBlogState, action) {
	switch(action.type)
	{
		case "FETCHING_BLOG":
			state = {
				...state,
				fetching: true
			};
			break;
		case "FETCHING_SUCCESS":
			state = {
				...state,
				fetched: true,
				blogs: action.payload
			};
			break;
		case "FETCHING_ERROR":
			state = {
				...state,
				fetched: false,
				error: action.payload
			};
			break;
		default:
			break;
	}
	return state;
};

提供商：

import React from 'react';
import ReactDOM from 'react-dom';

import App from './container/App';
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
	<Provider store={store}>
		<App />
	</Provider>, document.getElementById('root'));

商店：

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import blogReducer from './reducers/blogReducer';
import thunk from 'redux-thunk';

const store = createStore(
	blogReducer,
	{},
	applyMiddleware(thunk, logger())
);

export default store;