javascript - Reactjs redux，是否可以有两个组件使用一个状态？

Question

我遇到了这个错误:

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

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

这是我的容器:

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

这是我的两个组件:

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

只有第二个列表 DisplayWikiList 正在显示列表。 另一个是空白的，没有穿过!

所以我想知道，是因为我在两个组件中使用了相同的 Prop 吗？

当我检查返回帖子时， 我的容器是:

帖子[ -> 广泛匹配 {object1{name, id}, object2{name, id}...} ->维基百科 [object1{name, id}, object2{name, id}...] ]

如果我显示发送到组件的内容:

posts['broadmatch'] = {object1{名称, id}, object2{名称, 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 传递给多个子组件。也就是说，看起来您的两个子组件都在传入的 prop 数据上使用 .map() 函数，但 .map() 只能由数组使用，不是物体。看起来 broadmatch 是一个对象，这意味着 map() 迭代器将不起作用。尝试使用 lodash 中的 _.map()或underscore .

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