快捷導(dǎo)航

Objects are not valid as a React child報(bào)錯(cuò)解決

更新時(shí)間：2022年12月05日 09:49:19 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了Objects are not valid as a React child報(bào)錯(cuò)解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們嘗試在JSX代碼中，直接渲染對(duì)象或者數(shù)組時(shí)，會(huì)產(chǎn)生"Objects are not valid as a React child"錯(cuò)誤。為了解決該錯(cuò)誤，在JSX代碼中，使用map()方法來渲染數(shù)組或者訪問對(duì)象的屬性。

下面是錯(cuò)誤如何發(fā)生的示例。

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

map

上述代碼片段的問題在于，在JSX代碼中我們嘗試直接渲染數(shù)組或者對(duì)象。

為了解決該錯(cuò)誤，當(dāng)渲染JSX代碼時(shí)，使用map()方法來渲染數(shù)組或者訪問對(duì)象的屬性。

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

當(dāng)調(diào)試時(shí)，可以使用console.log來打印導(dǎo)致錯(cuò)誤的值。

JSON.stringify

或者，你可以在JSX代碼中使用JSON.stringify()轉(zhuǎn)換該值，以確保它是預(yù)期的類型。

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()方法將會(huì)在對(duì)象渲染之前，將其轉(zhuǎn)換為字符串。

你必須確保在JSX代碼中，不會(huì)渲染對(duì)象或者數(shù)組。相反，你必須渲染原始值，比如說字符串以及數(shù)值。

Date

另一個(gè)導(dǎo)致該錯(cuò)誤的常見原因是，在JSX代碼中我們?cè)噲D直接渲染Date對(duì)象時(shí)。

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對(duì)象上的方法，比如說，toLocaleDateString() 。

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

現(xiàn)在，我們使用字符串代替對(duì)象來進(jìn)行渲染，因此該錯(cuò)誤被解決。

花括號(hào)

如果錯(cuò)誤依舊存在，請(qǐng)確保當(dāng)渲染變量時(shí)，你沒有使用雙花括號(hào)。

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變量包裹在兩組花括號(hào)內(nèi)，這也是為什么React認(rèn)為嘗試渲染一個(gè)對(duì)象。為了解決該問題，可以只將變量包裹在一組大括號(hào)中。

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

現(xiàn)在React把message變量當(dāng)作一個(gè)包含字符串的表達(dá)式，而不是一個(gè)對(duì)象。

async

如果錯(cuò)誤依舊存在，請(qǐng)確保在JSX代碼中沒有調(diào)用async函數(shù)。

async函數(shù)返回一個(gè)Promise對(duì)象，因此在JSX代碼中，如果調(diào)用了async函數(shù)，則錯(cuò)誤就會(huì)發(fā)生。

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

為了解決該錯(cuò)誤，我們必須在useEffect鉤子或者事件處理器里調(diào)用async函數(shù)，比如說，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>
  );
}

在useEffect鉤子中調(diào)用async函數(shù)可以解決這個(gè)錯(cuò)誤，因?yàn)槲覀儸F(xiàn)在渲染的是一個(gè)數(shù)字，而不是Promise對(duì)象。