对象作为 React 子 React 错误无效

Objects are not valid as a React child React error

当我们尝试在 JSX 代码中直接呈现对象或数组时，会出现 React.js 错误“对象作为 React 子项无效”。要解决该错误，请使用该map()方法在 JSX 代码中呈现数组或访问对象的属性。

对象作为反应孩子无效

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

应用程序.js


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',
  };

  // ⛔️ 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 (
    <div>
      {employees}

      {obj}
    </div>
  );
}

问题是我们试图在我们的 JSX 代码中直接渲染数组或对象。

要解决该错误，请使用map()方法来渲染数组或在渲染对象时访问对象的属性。

应用程序.js


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 (
    <div>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

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

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

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

      <hr />
    </div>
  );
}

调试时，console.log()导致错误的值。

或者，您可以JSON.stringify()使用 JSX 代码中的值来确保它是预期的类型。

应用程序.js


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 (
    <div>
      <h4>{JSON.stringify(employees)}</h4>

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

该JSON.stringify()方法会在对象呈现之前将其转换为字符串。

您必须确保您没有在 JSX 代码中渲染对象或数组。相反，您必须呈现原始值，如字符串和数字。

“Objects are not valid as a React child”错误的另一个常见原因是试图Date在我们的 JSX 代码中直接渲染一个对象。

应用程序.js


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

  // ⛔️ Objects are not valid as a React child (found: [object Date]).
  return (
    <div>
      <h4>{date}</h4>
    </div>
  );
}

要解决此问题，请访问Date对象上的方法，例如
toLocaleDateString().

应用程序.js


export default function App() {
  return (
    <div>
      <h4>{date.toLocaleDateString()}</h4>
    </div>
  );
}

错误已解决，因为我们现在渲染的是 astring而不是对象。

如果错误仍然存在，请确保在呈现变量时没有使用双花括号。

应用程序.js


export default function App() {
  const message = 'hello world';

  // ⛔ Objects are not valid as a React child (found: object with keys {message}).
  return (
    <div>
      <h4>{{message}}</h4>
    </div>
  );
}

请注意，该message变量包含在 2 组大括号中，这就是 React 认为我们正在尝试渲染对象的原因。

要解决该错误，请仅将变量包装在一组花括号中。

应用程序.js


export default function App() {
  return (
    <div>
      <h4>{message}</h4>
    </div>
  );
}

现在 React 将message变量视为包含 astring
而不是对象的表达式。

如果错误仍然存在，请确保您没有async 在 JSX 代码中调用函数。

异步函数返回一个Promise对象，因此如果您在 JSX 代码中调用一个对象，就会发生错误。

应用程序.js


export default function App() {
  async function getData() {
    return Promise.resolve(42);
  }

  // ⛔ Objects are not valid as a React child (found: [object Promise]).
  return (
    <div>
      <h4>{getData()}</h4>
    </div>
  );
}

为了解决错误，我们必须async在钩子内部
useEffect或事件处理程序中调用函数，例如onClick。

应用程序.js


import {useEffect, useState} from 'react';

export default function App() {
  const [num, setNum] = useState(0);

  useEffect(() => {
    async function getData() {
      const result = await Promise.resolve(42);

      setNum(result);
    }

    getData();
  }, []);

  return (
    <div>
      <h4>{num}</h4>
    </div>
  );
}

在我们的钩子中调用异步函数useEffect解决了错误，因为我们现在正在渲染一个数字而不是一个 Promise 对象。

React 错误“Objects are not valid as a React child”的发生有多种原因：

直接在 JSX 代码中渲染对象或数组
Date直接在 JSX 代码中渲染对象
将变量包装在两组花括号中，例如{{message}}代替
{message}
在 JSX 代码中调用异步函数

–