javascript - react 终极版 : Unable to Map array of Objects

Question

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

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

我将 mapStateToProps(保存响应数据)中的 posts 通过 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;

Answer 1

重新充电

Uncaught TypeError: Cannot read property 'map' of undefined

您可以尝试为博客组件定义默认属性类型。

Blog.defaultProps = {
    blog_posts: []
}

但这可能无法解决问题，它可能与您正在执行的其他错误有关。

更重要的是应该使用 map 函数返回调用 .map 的集合的转换集合。所以在你的例子中，你没有从 map 返回任何对象，你正在使用(我想知道这段代码为什么没有报告编译错误，因为 map 应该返回一个值):

let b = this.props.blog_posts.map(item => {
    console.log(item)
});

如果您只想遍历集合，请使用 .forEach 代替 .map，如果您打算使用 .map 将集合转换为新集合，那么您的函数应该返回 一个值，不仅仅是 console.log 的东西。它应该是这样的:

let b = this.props.blog_posts.map(item => {
    console.log(item);
    return item; // you can transform the item here however you like
});

虽然我认为没有必要在 .map 迭代中 console.log 任何内容。