首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >回应Redux警告:失败的propType:必需的支柱` `Posts`‘没有在’`posts`‘中指定。检查“`PostsContainer`”的呈现方法

回应Redux警告:失败的propType:必需的支柱` `Posts`‘没有在’`posts`‘中指定。检查“`PostsContainer`”的呈现方法
EN

Stack Overflow用户
提问于 2016-06-16 13:04:43
回答 2查看 2.8K关注 0票数 1

我试图使用redux在redux组件中显示一个帖子列表,但我得到了以下警告:

警告:失败的propType:必需的posts没有在Posts中指定。检查PostsContainer的呈现方法。

我有以下代码:

邮政集装箱:

代码语言:javascript
复制
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)

员额构成部分:

代码语言:javascript
复制
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

我做错了什么?

编辑

这是员额减速机:

代码语言:javascript
复制
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

至于导入容器,它在路由索引中:

代码语言:javascript
复制
 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} />
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-06-16 14:45:09

您如何导入PostsContainer

如果你这样做的话

代码语言:javascript
复制
import { PostsContainer } from PostsContainer; 

您不会导入connect编辑版本,因此不会在PostsContainer中使用posts支柱。

你能把进口代码寄出去吗?

票数 2
EN

Stack Overflow用户

发布于 2016-06-16 15:04:06

因为您是在componentDidMount of PostsContainer上运行PostsContainer,所以它第一次呈现时还没有任何帖子,所以this.props.posts的值是null。这就是传递给Posts的内容,违反了您的propTypes要求。

您可以在ifrender方法中添加一个PostsContainer语句,以便只在有posts的情况下呈现Posts,否则就呈现一个加载自旋器。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37860137

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档