不变违规:对象作为React子对象无效(对于嵌套对象)

Question

在我的反应组件中,我有一个user看起来像的对象

{
  _id: xxx, 
  stats: {a: 1, b: 2, c: 3},
  shops: [s1, s2, s3] // s1, s2, s3 are all objects
  ...
}

然后在我的代码中我指定它是一个对象.

export class UserComponent extends React.Component<void, Props, void> {
  static propTypes = {
    user: PropTypes.array,
    fetchProfile: PropTypes.func.isRequired
  };

  componentDidMount() {
    this.props.fetchProfile();
  }

  render () {
    const { user } = this.props;
    return (
      <div className='container text-center'>
        {user}
        <Link to="/">homeE</Link>
      </div>
    )
  }
}

但是当我运行代码时,错误消息说:

invariant.js:39 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {thumb, path, photo_id, shop_id, message, _id, date_added}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.invaria....

似乎我可以做类似的事情createFragment(user).但这不适合我,因为这个对象有很多嵌套对象,如上所述.

有谁知道如何解决这个问题？

Answer 1

在该行中,您传递object类型的值.

  <div className='container text-center'>
    {user} // this is an object
    <Link to="/">homeE</Link>
  </div>

在您的情况下,user必须是string类型或React component(由...创建React.createElement)或array类型React elements.

如果需要从用户渲染某些数据或将其传递给另一个组件,您可以这样做:

  <div className='container text-center'>
    <User data={user} />
    <Link to="/">homeE</Link>
  </div>

当然,您必须定义Userreact组件,它处理(呈现)用户对象的属性.在User组件中我们可以获得user对象this.props.data