我试图使用redux在redux组件中显示一个帖子列表,但我得到了以下警告:
警告:失败的propType:必需的posts没有在Posts中指定。检查PostsContainer的呈现方法。
我有以下代码:
邮政集装箱:
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { getInitalPosts } from 'actions/postsActions'
import { Link } from 'react-router'
import _ from 'lodash'
import Posts from 'components/PostApp/Posts'
class PostsContainer extends Component {
static fetchData({ store }) {
return store.dispatch(getInitalPosts())
}
componentDidMount() {
this.props.getInitalPosts()
}
render() {
return (
<div>
<h2>Posts</h2>
<Posts posts={this.props.posts} />
<Link to="/">Back to Home</Link>
</div>
)
}
}
function mapStateToProps (state) {
return { posts: state.posts }
}
export { PostsContainer }
export default connect(mapStateToProps, { getInitalPosts })(PostsContainer)员额构成部分:
import React, { Component, PropTypes } from 'react'
import { List } from 'immutable'
class Posts extends Component {
render() {
return (
<div>
Posts component
{
this.props.posts
}
</div>
)
}
}
Posts.propTypes = {
posts: PropTypes.instanceOf(List).isRequired
//posts: PropTypes.posts
}
export default Posts我做错了什么?
编辑
这是员额减速机:
import * as ActionType from 'actions/postsActions'
import Immutable from 'immutable'
let defaultState = Immutable.fromJS([])
function postsReducers (state = defaultState, action) {
switch(action.type) {
case ActionType.INITIAL_POSTS:
return Immutable.fromJS(action.response)
break
default:
return state
}
}
export default postsReducers至于导入容器,它在路由索引中:
8 import Questions from 'containers/Questions'
9 import Question from 'containers/Question'
10: import Posts from 'containers/Posts'
11
12 export default function(history) {
..
14 <Router history={history}>
15 <Route path="/" component={App}>
16: <Route path="posts" component={Posts} />
17 <Route path="questions" component={Questions} />
18 <Route path="questions/:id" component={Question} />发布于 2016-06-16 14:45:09
您如何导入PostsContainer?
如果你这样做的话
import { PostsContainer } from PostsContainer; 您不会导入connect编辑版本,因此不会在PostsContainer中使用posts支柱。
你能把进口代码寄出去吗?
发布于 2016-06-16 15:04:06
因为您是在componentDidMount of PostsContainer上运行PostsContainer,所以它第一次呈现时还没有任何帖子,所以this.props.posts的值是null。这就是传递给Posts的内容,违反了您的propTypes要求。
您可以在if的render方法中添加一个PostsContainer语句,以便只在有posts的情况下呈现Posts,否则就呈现一个加载自旋器。
https://stackoverflow.com/questions/37860137
复制相似问题