React 中 Objects are not valid as a React child 错误

React 2月前 61

当我们尝试在 JSX 代码中直接呈现对象或数组时，会出现 React.js 错误“Objects are not valid as a React child”。要解决该错误，请使用 map() 方法在 JSX 代码中呈现数组或访问对象的属性。

看下面的代码

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>
  );
}

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

  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 代码中的值以确保它是预期的类型。

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() 方法会在对象呈现之前将其转换为字符串。

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

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()。

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

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

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

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>
  );
}

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

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

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

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

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>
  );
}

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

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>
  );
}