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。< / p>

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

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

当然，您必须定义User react组件，它处理（呈现）用户对象的属性。在User组件中，我们可以通过user

获取this.props.data个对象

不变违规：对象作为React子对象无效（对于嵌套对象）

1 个答案: