总览
当我们尝试在JSX代码中，直接渲染对象或者数组时，蓝狮注册登陆会产生 “Objects are not valid as a react child” 错误。为了解决该错误，在JSX代码中，使用 map() 方法来渲染数组或者访问对象的属性。

下面是错误如何发生的示例。

export default function App() {
const employees = [
{id: 1, name: ‘Alice’, country: ‘Austria’},
{id: 2, name: ‘Bob’, country: ‘Belgium’},
{id: 3, name: ‘Carl’, country: ‘Canada’},
];

const obj = {
id: 4,
name: ‘Dean’,
country: ‘Denmark’,
};

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

return (

{employees}

  {obj}
</div>

);
}
map
上述代码片段的问题在于，在JSX代码中我们尝试直接渲染数组或者对象。

为了解决该错误，当渲染JSX代码时，使用 map() 方法来渲染数组或者访问对象的属性。

export default function App() {
const employees = [
{id: 1, name: ‘Alice’, country: ‘Austria’},
{id: 2, name: ‘Bob’, country: ‘Belgium’},
{id: 3, name: ‘Carl’, country: ‘Canada’},
];

const obj = {
id: 4,
name: ‘Dean’,
country: ‘Denmark’,
};

return (

{employees.map((employee, index) => {
return (

name: {employee.name}

country: {employee.country}

        <hr />
      </div>
    );
  })}

  <hr />
  <hr />
  <hr />

  <div>
    <h2>name: {obj.name}</h2>
    <h2>county: {obj.country}</h2>
  </div>

  <hr />
</div>

);
}
当调试时，可以使用 console.log 来打印导致错误的值。

JSON.stringify
或者，你可以在JSX代码中使用 JSON.stringify() 转换该值，蓝狮官网以确保它是预期的类型。

export default function App() {
const employees = [
{id: 1, name: ‘Alice’, country: ‘Austria’},
{id: 2, name: ‘Bob’, country: ‘Belgium’},
{id: 3, name: ‘Carl’, country: ‘Canada’},
];

const obj = {
id: 4,
name: ‘Dean’,
country: ‘Denmark’,
};

return (

{JSON.stringify(employees)}

  <h4>{JSON.stringify(obj)}</h4>
</div>

);
}
JSON.stringify() 方法将会在对象渲染之前，将其转换为字符串。

你必须确保在JSX代码中，不会渲染对象或者数组。相反，你必须渲染原始值，比如说字符串以及数值。

Date
另一个导致该错误的常见原因是，在JSX代码中我们试图直接渲染 Date 对象时。

export default function App() {
const date = new Date();

// :no_entry:️ Objects are not valid as a React child (found: [object Date]).
return (

{date}

);
}