React 报错之 Objects are not valid as a React child - 请勿直接渲染对象或数组！

2023-12-06 02:09:20

在 React 中，我们经常使用 JSX 语法来编写代码。JSX 是 JavaScript 的语法扩展，它允许我们使用类似 HTML 的语法来编写 React 组件。然而，在使用 JSX 时，我们需要遵循一些规则，否则可能会遇到错误。其中一个常见的错误就是 "Objects are not valid as a React child"。

这个错误意味着我们尝试在 JSX 代码中，直接渲染对象或者数组。例如，以下代码会产生错误：

const obj = {
  name: 'John Doe',
  age: 30
};

const arr = [1, 2, 3];

function MyComponent() {
  return (
    <div>
      {obj}
      {arr}
    </div>
  );
}

当我们尝试渲染这个组件时，我们会看到以下错误：

Uncaught Error: Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead.

这个错误告诉我们，对象和数组不能直接作为 React 子元素渲染。如果我们要渲染一个对象或者数组，我们需要将其转换为一个有效的 React 元素。有几种方法可以做到这一点：

使用 React.createElement() 方法

React.createElement() 方法可以创建一个 React 元素。我们可以使用这个方法来将对象或数组转换为 React 元素。例如，我们可以将上面的代码修改为：

const obj = {
  name: 'John Doe',
  age: 30
};

const arr = [1, 2, 3];

function MyComponent() {
  return (
    <div>
      {React.createElement('div', null, obj.name)}
      {React.createElement('div', null, obj.age)}
      {React.createElement('div', null, arr)}
    </div>
  );
}

这样，我们就可以正确地渲染对象和数组了。

使用展开运算符

展开运算符 (...) 可以将一个对象或数组展开为单个元素。我们可以使用这个运算符来将对象或数组直接渲染到 JSX 代码中。例如，我们可以将上面的代码修改为：

const obj = {
  name: 'John Doe',
  age: 30
};

const arr = [1, 2, 3];

function MyComponent() {
  return (
    <div>
      {...obj}
      {...arr}
    </div>
  );
}

这样，我们也可以正确地渲染对象和数组了。

使用 React 碎片

React 碎片是一个特殊的 React 元素，它允许我们将多个子元素组合在一起渲染，而不会创建额外的 DOM 节点。我们可以使用 React 碎片来将对象或数组渲染到 JSX 代码中。例如，我们可以将上面的代码修改为：

const obj = {
  name: 'John Doe',
  age: 30
};

const arr = [1, 2, 3];

function MyComponent() {
  return (
    <>
      {obj.name}
      {obj.age}
      {arr}
    </>
  );
}