脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → Objects React child报错

Objects are not valid as a React child报错解决

 更新时间：2022年12月05日 09:49:19   作者：Borislav Hadzhiev  
这篇文章主要为大家介绍了Objects are not valid as a React child报错解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

总览

当我们尝试在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',
  };
  // ⛔️ 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代码中我们尝试直接渲染数组或者对象。

为了解决该错误，当渲染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代码中使用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 (
    <div>
      <h4>{JSON.stringify(employees)}</h4>
      <h4>{JSON.stringify(obj)}</h4>
    </div>
  );
}

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

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

Date

另一个导致该错误的常见原因是，在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>
  );
}

注意message变量包裹在两组花括号内，这也是为什么React认为尝试渲染一个对象。为了解决该问题，可以只将变量包裹在一组大括号中。

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

现在React把message变量当作一个包含字符串的表达式，而不是一个对象。

async

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

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

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钩子或者事件处理器里调用async函数，比如说，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钩子中调用async函数可以解决这个错误，因为我们现在渲染的是一个数字，而不是Promise对象。

总结

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

  • 在JSX代码中直接渲染对象或者数组；
  • 在JSX代码中直接渲染Date对象；
  • 在两组花括号中包裹变量，比如：{{message}}而不是{message}；
  • 在JSX代码中调用async函数。

翻译原文链接：bobbyhadz.com/blog/react-…

以上就是Objects are not valid as a React child报错解决的详细内容，更多关于Objects React child报错的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • React实现一个拖拽排序组件的示例代码

    React实现一个拖拽排序组件的示例代码

    这篇文章主要给大家介绍了React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域,文章通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 详解React Native项目中启用Hermes引擎

    详解React Native项目中启用Hermes引擎

    这篇文章主要为大家介绍了React Native项目中启用Hermes引擎实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • 2023年最新react面试题总结大全(附详细答案)

    2023年最新react面试题总结大全(附详细答案)

    React是一种广泛使用的JavaScript库,为构建用户界面提供了强大的工具和技术,这篇文章主要给大家介绍了关于2023年最新react面试题的相关资料,文中还附有详细答案,需要的朋友可以参考下
    2023-10-10
  • react纯函数组件setState更新页面不刷新的解决

    react纯函数组件setState更新页面不刷新的解决

    在开发过程中，经常遇到组件数据无法更新，本文主要介绍了react纯函数组件setState更新页面不刷新的解决，感兴趣的可以了解一下
    2021-06-06
  • React实现路由鉴权的实例详解

    React实现路由鉴权的实例详解

    React应用中的路由鉴权是确保用户仅能访问其授权页面的方式,用于已登录或具有访问特定页面所需的权限,这篇文章就来记录下React实现路由鉴权的流程,需要的朋友可以参考下
    2024-07-07
  • react+antd实现动态编辑表格数据

    react+antd实现动态编辑表格数据

    这篇文章主要为大家详细介绍了react+antd实现动态编辑表格数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 如何利用React实现图片识别App

    如何利用React实现图片识别App

    图片识别这个功能在很多app中都有,下面这篇文章主要给大家介绍了关于如何利用React实现图片识别App的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • React中10种Hook的使用介绍

    React中10种Hook的使用介绍

    Hook 是 React 16.8 的新增特性，本文主要介绍了10种Hook的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • React嵌套组件的构建顺序

    React嵌套组件的构建顺序

    这篇文章主要介绍了React嵌套组件的构建顺序，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04
  • 利用React-router+Webpack快速构建react程序

    利用React-router+Webpack快速构建react程序

    目前 React、Webpack 等技术如火如荼，你是不是还在愁苦如何把这些杂乱的知识怎么学习一下，开启一段新的前端开发之路呢？那么这篇将给大家运用示例代码详细的介绍使用React-router和Webpack如何快速构建一个react程序，感兴趣的朋友们下面来一起看看吧。
    2016-10-10

最新评论