正文从这开始~

总览

当我们尝试在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函数。

React报错之Objects are not valid as a React child的更多相关文章

  1. react 报错的堆栈处理

    react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...

  2. vue 表单校验报错 "Error: please transfer a valid prop path to form item!"

    vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...

  3. DRDB报错------0: Failure: (119) No valid meta-data signature found.

    一. 错误 drbdadm create-md datadrbdadm up data  <--启动时报错 [root@data-- ~]# drbdadm up data : Failure: ...

  4. MYSQL安装报错 -- 出现Failed to find valid data directory.

    运行环境:windows10数据库版本:mysql.8.0.12安装方式:rpm包直接安装 问题描述:mysql初始化的时候找不到对应的数据库存储目录 报错代码: 2018-10-13T03:29:2 ...

  5. 不修改系统日期和时间格式,解决Delphi报错提示 '****-**-**'is not a valid date and time

    假如操作系统的日期格式不是yyyy-MM-dd格式,而是用strtodate('2014-10-01')) 来转换的话,程序会提示爆粗 '****-**-**'is not a valid date ...

  6. azure iothub create-device-identity样例报错: unable to find valid certification path ,及iothub-explorer Error: CERT_UNTRUSTED

    https://docs.microsoft.com/zh-cn/azure/iot-hub/iot-hub-java-java-getstarted 在IDEA中执行上述的代码,会出现下面的报错信息 ...

  7. React报错 :browserHistory doesn't exist in react-router

    由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...

  8. Linux安装Apache报错:Cannot find a valid baseurl for repo: base/7/x86_64解决方案

    最近使用CentOS7学习,安装安装Apache时候,使用yum安装Apache报错:本文适合CentOS7和RHEL7 # yum install httpd 出现:cannot find a va ...

  9. react报错 TypeError: Cannot read property 'setState' of undefined

    代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false ...

  10. React报错:Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix,

    今天在开发时报了以下错误,记录一下 我们不能在组件销毁后设置state,防止出现内存泄漏的情况 出现原因直接告诉你了,组件都被销毁了,还设置个锤子的state啊 解决方案: 利用生命周期钩子函数:co ...

随机推荐

  1. CSS 3 颜色表示法

    1,Color Name:red    优点:方便记忆  缺点:数量少不支持透明度 2,HEX方式:#FFFFFF    优点:颜色种类多   缺点:换算复杂需要借助工具 3,RGB方式:rgb(25 ...

  2. 无法使用内置管理员账户打开Microsoft Edge

    一.以管理员批准模式运行所有管理员 运行"gpedit.msc",打开本地组策略编辑器,然后依次打开"计算机配置→Windows 设置→安全设置→本地策略→安全选项&qu ...

  3. js parseInt();parseFloat;Number()

    1:  parseInt( numString [, radix ] ) [测试浏览器:chromium && firefox] ①parseInt()函数用于将字符串转换为(十进制) ...

  4. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  5. zoj1940(三维广搜)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=940 分析:三维其实就是六个方向地搜索,思维清晰且细心点,很快就AC了 ...

  6. RabbitMQ入门-消息派发那些事儿

    在上篇<RabbitMQ-高效的Work模式>中,我们了解了Work模型,该模型包括一个生产者,一个消息队列和多个消费者. 我们已经通过实例看出消息队列中的消息是如何被一个或者多个消费者消 ...

  7. 进阶-MongoDB 知识梳理

    MongoDB 一.MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式.Mo ...

  8. 常用Mac快捷键

    1.复制Cmd + C 粘贴Cmd + C —-> Cmd + V 剪切Cmd + C —-> Cmd + Opt + V 2.查看隐藏文件 Cmd + shift + . 3. 货币符号 ...

  9. responseHandler

    resonsehandler 接受服务端传过来的数据,然后在这个函数里处理好要显示的数据在return个table显示 <!DOCTYPE html> <html lang=&quo ...

  10. nginx http转 https

    场景 项目前期使用http,后期为了安全方面的考虑,启用了https.项目架构:前端使用nginx作为多个tomcat实例的反向代理和负载均衡.实际上只需要在nginx上启用https即可,使客户端与 ...