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

Question

I am having this error:

bundle.js:2586 Warning: Failed propType: Invalid prop posts of type array supplied to DisplayTrendings , expected object . Check the render method of Connect(DisplayTrendings) .

And I have 2 lists that display items from an ajax call.

Here is my container:

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

And here are my 2 components:

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

Only the second list, DisplayWikiList is displaying a list. The other one is blank and it doesn't go through it!

So I am wondering, is it because I am using the same props into the 2 components ?

When I check the returns posts, to my container it's :

posts[ ->broadmatch {object1{name, id}, object2{name, id}...} ->wikipedia [object1{name, id}, object2{name, id}...] ]

and if I display what I send to my component:

posts['broadmatch'] = {object1{name, id}, object2{name, id}...}

What am I really doing wrong here?

Answer 1

React supports multiple data types given the same prop; so you don't have to limit yourself to one or the other:

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

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

EDIT What you're doing is viable, meaning you are absolutely able to pass the same prop to multiple sub-components without issue. That said, it looks as though both your subcomponents are using the .map() function on the incoming prop data, but .map() can only be used by arrays, not objects. And it looks like broadmatch is an object, meaning the map() iterator will not work. Try using _.map() from lodash or underscore .

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