[英]TypeError: Cannot read property 'map' of undefined React-Redux
I am learning Redux
from https://app.pluralsight.com/library/courses/react-redux-react-router-es6/table-of-contents but I am stuck at some point.我正在从https://app.pluralsight.com/library/courses/react-redux-react-router-es6/table-of-contents学习
Redux
,但我被困在某个点上。 When I am trying to map my courses in CoursePage.js
then it is showing this error, The prop courses
is marked as required in CoursesPage
, but its value is undefined
.当我尝试在 CoursePage.js 中对我的课程进行
CoursePage.js
时,它会显示此错误,道具courses
在CoursesPage
中标记为必需,但其值是undefined
。 and:和:
Uncaught TypeError: Cannot read property 'map' of undefined.
未捕获的类型错误:无法读取未定义的属性“地图”。
Here's the code这是代码
CoursePage.js CoursePage.js
import React, { Component } from "react";
import { connect } from "react-redux";
import * as courseAction from "../../redux/actions/courseAction";
class CoursePage extends Component {
constructor(props) {
super(props);
console.log(this);
this.state = {
course: {
title: "",
},
};
}
handleChange = (event) => {
const course = { ...this.state.course, title: event.target.value };
this.setState({ course });
};
handleSubmit = (event) => {
event.preventDefault();
this.props.createCourse(this.state.course);
// alert(this.state.course.title);
};
render() {
return (
<main>
<div className="container">
<div className="jumbotron jumbotron-fluid">
<div className="container">
<h1 className="display-4">Course Page</h1>
<form className="mt-4" onSubmit={this.handleSubmit}>
<input
type="text"
onChange={this.handleChange}
value={this.state.course.title}
/>
<input type="submit" value="Add" />
{this.props.course.map((course) => (
<div key={course.title}>{course.title}</div>
))}
</form>
</div>
</div>
</div>
</main>
);
}
}
function mapStateToProps(state) {
return {
course: state.course,
};
}
function mapDispatchToProps(dispatch) {
return {
createCourse: (course) => dispatch(courseAction.createCourse(course)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(CoursePage);
courseReducer.js courseReducer.js
import * as types from "../actions/actionTypes";
export default function courseReducer(state = [], action) {
switch (action.type) {
case types.CREATE_COURSE:
return [...state, { ...action.course }];
default:
return state;
}
}
The state called this.state.course
is an {}
and that's the reason why you cannot run .map()
on it. state 称为
this.state.course
是一个{}
,这就是您无法在其上运行.map()
的原因。 It can handle arrays only.它只能处理 arrays。 Instead probably you want to show up
title
for the course then you don't need .map()
.相反,您可能想显示课程的
title
,然后您不需要.map()
。
Try the following only:仅尝试以下操作:
<div>{this.state.course.title}</div>
I hope this helps!我希望这有帮助!
You've got a few minor issues here, that need fixing to bring you on the right track.您在这里遇到了一些小问题,需要解决这些问题才能使您走上正轨。
Your mapStateToProps
refers to course
, not courses
.您的
mapStateToProps
指的是course
,而不是courses
。 And if you want it to refer to courses
then you need to update how the CREATE_COURSE
action works in your reducer.如果您希望它引用
courses
,那么您需要更新CREATE_COURSE
操作在减速器中的工作方式。
To fix the crash causing bug you'll need to add an initialState
so that courses
isn't undefined.要修复导致错误的崩溃,您需要添加一个
initialState
以便courses
不是未定义的。 Since it's ok to map through an empty array, but you can't map through undefined
.由于可以通过空数组 map ,但不能通过
undefined
map 。
Update your courseReducer
to the following:将您的
courseReducer
更新为以下内容:
import * as types from "../actions/actionTypes";
const initialState = {
courses: []
}
export default function courseReducer(state = initialState, action) {
switch (action.type) {
case types.CREATE_COURSE:
return { ...state, courses: [...state.courses, action.course] };
default:
return state;
}
}
And then make this change to your mapStateToProps
:然后对您的
mapStateToProps
进行此更改:
function mapStateToProps(state) {
return {
courses: state.courses,
};
}
Finally change this bit of code from this.props.course
to this.props.courses
:最后将这段代码从
this.props.course
为this.props.courses
:
{this.props.courses.map((course) => (
<div key={course.title}>{course.title}</div>
))}
Now your app should work as intended.现在您的应用程序应该可以按预期工作了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.