reactjs - 不变违规 : Objects are not valid as a React child (for nested objects)

Question

在我的 react 组件中，我有一个对象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 未捕获的不变违规:对象作为 React 子对象无效(找到:带有键 {thumb、path、photo_id、shop_id、message、_id、date_added} 的对象)。如果您打算渲染子集合，请改用数组或使用 React add-ons.invaria 中的 createFragment(object) 包装对象......

看来我可以做类似createFragment(user)的事情。但这对我不起作用，因为这个对象有很多像上面这样的嵌套对象。

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

Answer 1

在该行中，您传递object类型的值。

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

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

如果您需要呈现用户的一些数据或将其传递给另一个组件，您可以这样做:

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

当然，您必须定义User react 组件，它处理(渲染)用户对象的属性。在User组件中我们可以通过this.props.data

获取 user对象