Question

我遇到了这个错误：

bundle.js：2586警告：propType失败：提供给posts的{{1}}类型的道具array无效，预计为DisplayTrendings。检查object的呈现方法。

我有2个列表来显示ajax调用中的项目。

这是我的容器：

Connect(DisplayTrendings)

这是我的两个组成部分：

export default class DisplayTrendings extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchPosts('trendings'));
  }

  render() {
    const { posts, isFetching } = this.props;
    console.log("posts in container :", posts['wikipedia']);
    const isEmpty = posts.length === 0;
    return (
      <Card className="card-main">
          <h2 className="trending-title">Trendings</h2>
          <ColumnName />

          {isEmpty
            ? (isFetching ? <h2>Loading...</h2> : <h2>Empty request.</h2>)
            : <div className="row">
                <div className="col-md-6">
                  <DisplayWikiList style={{ opacity: isFetching ? 0.5 : 1 }} postsWiki={posts['wikipedia']} />
                </div>
                <div className="col-md-6">
                  <DisplayBroadmatchList style={{ opacity: isFetching ? 0.5 : 1 }} postsBroad={posts['broadmatch']} />
                </div>
              </div>
          }

          <div className="col-md-6">
            <div className="row">
              <div className="col-xs-6">
                <input type="text" className="bespoke-label" />
              </div>
              <DisplayOutPut />
            </div>
          </div>
      </Card>
    );
  }
};

DisplayTrendings.propTypes = {
  posts: PropTypes.object.isRequired,
  isFetching: PropTypes.bool.isRequired,
  dispatch: PropTypes.func
};

function mapStateToProps(state) {
  console.log("state: ", state);
  const {
    isFetching,
    items: posts
  } = {
    isFetching: state.posts.isFetching,
    items: state.posts.items
  }
  return {
    posts,
    isFetching
  };
};

只有第二个列表，DisplayWikiList才显示列表。另一个是空白的，它没有通过它！

所以我想知道，是因为我在2个组件中使用相同的道具？

当我检查退货帖子时，我的容器：

export default class DisplayBroadmatchList extends Component { render() { if (this.props.postsBroad) { return ( <div className="row"> <div className="col-md-6"> <ul> {this.props.postsBroad.map((post, i) => <li key={i}>{ post.MarkerName }</li> )} </ul> </div> </div> ); } else { return ( <div></div> ); } } }; DisplayBroadmatchList.propTypes = { postsBroad: PropTypes.object }; export default class DisplayWikiList extends Component { render() { if (this.props.postsWiki) { return ( <div className="row"> <div className="col-md-6"> <ul> <li key="bui">yolo</li> {this.props.postsWiki.map((post, i) => <li key={i}>{ post.Entity }</li> )} </ul> </div> </div> ); } else { return ( <div></div> ); } } }; DisplayWikiList.propTypes = { postsWiki: PropTypes.object };

如果我显示我发送给我的组件的内容：

帖子[＆＃39; broadmatch＆＃39;] = {object1 {name，id}，object2 {name，id} ...}

我在这里做错了什么？

Answer 1

React支持给定相同prop的多种数据类型;所以你不必将自己限制在一个或另一个：

DisplayWikiList.propTypes = {
    postsWiki: React.PropTypes.oneOfType([
         React.PropTypes.object,
         React.PropTypes.array
    ]),
};

通过https://facebook.github.io/react/docs/reusable-components.html

修改你正在做的事情是可行的，这意味着你绝对能够毫无问题地将同一道具传递给多个子组件。也就是说，看起来你的子组件都在传入的prop数据上使用.map()函数，但.map()只能由数组使用，而不能由对象使用。看起来broadmatch是一个对象，这意味着map()迭代器不起作用。尝试使用lodash或underscore中的_.map()。

{ _.map(this.props.postsWiki, (post, key) => <li key={key}>{ post.Entity }</li> ) }

reactjs redux，是否可以通过2个组件进行状态使用？

1 个答案: