Question

如何映射返回的对象数组？当我点击按钮来获取博客时，我收到了这个回复

现在在我的app js中，

＆＃13;

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

＆＃13;

我将posts从mapStateToProps（包含响应数据）通过道具传递到IndexRoute中的Blog组件。

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

我的博客组件：

＆＃13;

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;

＆＃13;

reducer：

＆＃13;

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

＆＃13;

提供者：

＆＃13;

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

＆＃13;

商店：

＆＃13;

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;

＆＃13;

Answer 1

重新定位

Uncaught TypeError: Cannot read property 'map' of undefined

您可以尝试为Blog组件定义默认道具类型。

Blog.defaultProps = {
    blog_posts: []
}

但这可能无法解决问题，而且可能与您正在做的其他错误有关。

更重要的是map函数应该用于返回调用.map的变换集合。所以在你的情况下，你没有从map中返回任何对象，你正在使用（我想知道这段代码如何报告编译错误，因为map应该返回一个值）：

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

如果您只想通过集合进行迭代，请使用.forEach insted of .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。

Answer 2

您正在使用axios发送ajax请求，因此当您在map上呼叫blog_posts时，数据尚未返回。使用 redux-promise ：https://github.com/acdlite/redux-promise

Answer 3

好的，我已经解决了我的问题。当我点击fetch user组件中的Blog按钮时，map函数已经触发（甚至axios请求还没有完成返回数据）所以我创建了一个函数来检查{{ 1}}在我的reducer初始状态中的状态。使用代码

fetched

然后我发现在我的reducer中的初始状态中，if (this.props.fetched === true) { console.log("passed: ", this.props); console.log("blogs: ", this.props.blog_post); let b; b = this.props.blog_post.blogs.map(item => { return console.log(item) }); }已经错误地分配了fetched！所以我在true

中更改了它

React Redux：无法映射对象数组

3 个答案: