javascript - React with Redux Warning : Failed propType: Required prop `posts` was not specified in `Posts` . 检查 `PostsContainer`的render方法

标签 javascript reactjs ecmascript-6 redux

我正在尝试使用 redux 在 React 组件中显示帖子列表,但我收到以下警告:

警告:propType 失败:未在 Posts 中指定必需的 prop 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

我做错了什么?

[编辑]

这是后 reducer :

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

最佳答案

您如何导入 PostsContainer

如果你这样做:

import { PostsContainer } from PostsContainer; 

您不会导入 connected 版本,因此不会有您尝试在 PostsContainer 中使用的 posts Prop >.

你能发布导入代码吗?

关于javascript - React with Redux Warning : Failed propType: Required prop `posts` was not specified in `Posts` . 检查 `PostsContainer`的render方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37860137/

相关文章:

javascript - 如何在 Angular 的样式标签中格式化 URL?

javascript - CSS 选择器查找其中一个子元素具有特定文本值的元素

javascript - ReactJS 渲染函数语法错误

reactjs - 如何使用react/redux更新状态对象中的数组

javascript - 改变 React 父组件状态

javascript - 在 Aurelia Compose 的 View 模型中访问模型

javascript - 使用 JavaScript 创建 MDL 复选框

javascript - 使用 Typescript 时无法从单独的文件导入 React JSX

javascript - ReactJS,如何从 onChange 下拉列表更改表单类型

javascript - ES6 生成器——它们真的是异步/等待的替代品吗?