[英]React with Redux: error on propType property
I'm new in the React world.我是 React 世界的新手。 I got a course to training React and Redux.
我参加了培训 React 和 Redux 的课程。 Like yesterday I got an error while I'm attending an online training Even though, I walk through the author course and copy the code from the screen I get an error:
就像昨天一样,我在参加在线培训时遇到了一个错误尽管,我完成了作者课程并从屏幕上复制了代码,但我收到了一个错误:
Warning: Failed propType: Required prop courses
was not specified in CoursesPage
.警告:无法propType:必需道具
courses
未在规定CoursesPage
。 Check the render method of Connect(CoursesPage)
.检查
Connect(CoursesPage)
的渲染方法。
I have uploaded my code to github: https://github.com/tarcisiocorte/reactredux/blob/master/src/components/course/CoursesPage.js我已将我的代码上传到 github: https : //github.com/tarcisiocorte/reactredux/blob/master/src/components/course/CoursesPage.js
again....I will appreciate some help.再次......我会感谢一些帮助。
import React, {PropTypes} from "react"; import {connect} from 'react-redux'; import * as courseActions from '../../actions/courseActions'; class CoursesPage extends React.Component { constructor(props, context){ super(props, context); this.state = { course:{title: ""} }; this.onTitleChange = this.onTitleChange.bind(this); this.onClickSave = this.onClickSave.bind(this); } onTitleChange(event){ const course = this.state.course; course.title = event.target.value; this.setState({course: course}); } courseRow(course, index){ return <div key={index}>{course.title}</div>; } onClickSave() { this.props.dispatch(courseActions.createCourse(this.state.course)); } render() { return ( <div> <h1>Courses</h1> {this.props.courses.map(this.courseRow)} <h1>Add Courses</h1> <input type="text" onChange={this.onTitleChange} value={this.state.course.title} /> <input type="submit" value="Save" onClick={this.onClickSave} /> </div> ); } } CoursesPage.propTypes = { dispatch: PropTypes.func.isRequired, courses: PropTypes.array.isRequired }; function mapStateToProps(state, ownProps) { return{ courses: state.courses }; } export default connect(mapStateToProps)(CoursesPage);
In https://github.com/tarcisiocorte/reactredux/blob/master/src/index.js#L11在https://github.com/tarcisiocorte/reactredux/blob/master/src/index.js#L11
You need to specify a default for courses.您需要为课程指定默认值。
You have specified that your courses
prop is required:您已指定您的
courses
道具是必需的:
courses: PropTypes.array.isRequired
so you need to pass in something from the redux store and by the looks of it the courses
property in your redux store is undefined
.所以你需要从终极版店里的东西,由它的外观通过
courses
在你的终极版商店属性undefined
。 (Put a breakpoint here to check that is actually the case) ( 在此处放置一个断点以检查实际情况)
You can either make sure your redux store always returns something for your courses
or your can remove the isRequired
constrain:您可以确保您的 redux 存储始终为您的
courses
返回某些内容,或者您可以删除isRequired
约束:
CoursesPage.propTypes = {
dispatch: PropTypes.func.isRequired,
courses: PropTypes.array
};
In your 'Routes' component, you'll want to change在您的“路线”组件中,您需要更改
<Route path="courses" component={CoursesPage} />
to到
<Route path='courses' render={(stuff) => (
<CoursePage courses={stuff} />
)}/>
When you use component, you can't add your required props, so render would be a good alternative.当您使用组件时,您无法添加所需的道具,因此渲染将是一个不错的选择。 This also means you'll have to add redux connections to your routes.js since you need to get that information from somewhere.
这也意味着您必须向 routes.js 添加 redux 连接,因为您需要从某个地方获取该信息。
Another, more simpler, solution would be just to eliminate courses as a prop and get that information directly from redux when CoursePage loads up.另一个更简单的解决方案是将课程作为道具消除,并在 CoursePage 加载时直接从 redux 获取该信息。 You've already done half the battle with your mapStateToProps, therefore you dont need to have it with the "isRequired" in your propTypes.
您已经使用 mapStateToProps 完成了一半的战斗,因此您不需要在 propTypes 中使用“isRequired”。 This is basically when Klugjo said, so if you decide to take this approach, give him credit.
这基本上是 Klugjo 所说的,所以如果你决定采用这种方法,请相信他。
I'd also hazard a guess that if 'courses' in your store doesn't exist, your isRequired is being triggered as well.我还冒昧地猜测,如果您商店中的“课程”不存在,那么您的 isRequired 也会被触发。 So you might be able to keep isRequired as long as you have your data for that prop in the store.
因此,只要您在商店中有该道具的数据,您就可以保留 isRequired 。
For anyone coming across a similar failed prop type error, such as below, or if the other answers did not resolve your issue, the following might be an alternate fix for you.对于遇到类似失败的道具类型错误的任何人,例如以下,或者如果其他答案没有解决您的问题,以下可能是您的替代解决方案。 In the context of
user428745
's post above, someProjects
and ResponsiblePage
in the error below would correspond to the courses
prop (some array of values) and the CoursesPage
component, respectively.在的上下文
user428745
的帖子的上方, someProjects
和ResponsiblePage
在错误下面将对应于courses
支柱(一些数组值)和CoursesPage
分别分量。
Given user428745
's setup below鉴于下面
user428745
的设置
CoursesPage.propTypes = {
dispatch: PropTypes.func.isRequired,
courses: PropTypes.array.isRequired
};
function mapStateToProps(state, ownProps) {
return {
courses: state.courses
};
}
The issue might be related to how the redux state gets the state.courses
value in the first place.该问题可能与 redux 状态首先如何获取
state.courses
值有关。 In my case, the prop (ie. courses
as in state.courses
) in mapStateToProps
was being set before the data was available from the redux store.就我而言,支柱(即
courses
作为state.courses
)在mapStateToProps
是提供了Redux存储中的数据之前被设置。 This happened due to an API data call that had not yet finished.发生这种情况是由于 API 数据调用尚未完成。 My fix was:
我的解决方法是:
function mapStateToProps(state, ownProps) {
return {
courses: state.courses || [] // Equivalent to statement below
//courses: state.courses == null ? [] : state.courses
};
}
If state.courses
is null (due to API data not loaded yet) we return []
to satisfy the array
requirement on our prop.如果
state.courses
为空(由于尚未加载 API 数据),我们将返回[]
以满足我们道具上的array
要求。 If it is valid, which means the data was available and was put inside of state.courses
, then we simply return state.courses
similar to before.如果它是有效的,这意味着数据是可用的并且被放在
state.courses
,那么我们简单地返回state.courses
类似于之前。
Note also that there might be different required configuration setups (to make redux work properly), ie.另请注意,可能需要不同的配置设置(以使 redux 正常工作),即。 depending on how you link your reducer(s) to your root reducer (which would be the content in
index.js
inside of reducers
folder).取决于您如何将您的减速器链接到您的根减速器(这将是
reducers
文件夹内index.js
的内容)。 If the error is still not fixed with these changes, try another approach with the root reducer, such as:如果这些更改仍然无法修复错误,请尝试使用 root reducer 的另一种方法,例如:
// From this (see `user428745`'s source files, where 'courseReducer' was imported as 'courses')
export default combineReducers({
courseReducer
});
// To this
export default combineReducers({
rootReducer: courseReducer
});
// Where 'mapStateToProps' would also have to change
function mapStateToProps(state, ownProps) {
return {
courses: state.rootReducer.courses || []
};
}
And where you intend to use this value, ie.以及您打算在何处使用此值,即。 with
this.props.courses
or props.courses
in your CoursesPage
setup, you could console log the values (or whatever you wanted to do) only when the array is not empty:与
this.props.courses
或props.courses
在CoursesPage
的设置,你可以控制台登录值(或任何你想做的事),只有当数组不为空:
if (props.courses.length > 0) {
console.log(props.courses);
}
Or maybe listen to props.courses
changes so that you perform something only "in the moment" after it changes (whereas the if
statement above would be valid at all times, from when the prop was filled with values):或者也许听听
props.courses
变化,以便你只在它改变后的“那一刻”执行某些操作(而上面的if
语句在任何时候都是有效的,从 props 充满值开始):
useEffect(() => {
if (props.courses.length > 0) {
console.log(props.courses);
}
}, [props.courses]);
Note that if you use useEffect
, make sure it is within your CoursesPage
component, and not in the "root" of the file where you would ie.请注意,如果您使用
useEffect
,请确保它在您的CoursesPage
组件中,而不是在您将要使用的文件的“根”中。 write export default CoursesPage
.编写
export default CoursesPage
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.