Uncaught Invariant Violation: Minified React error #31 问题的一种解决方案

最新推荐文章于 2024-07-16 15:52:55 发布

niaonao

最新推荐文章于 2024-07-16 15:52:55 发布

阅读量2.3w

点赞数 1

分类专栏： [React] BlueUI 文章标签： react reactjs 前端

本文链接：https://blog.csdn.net/niaonao/article/details/105191632

版权

[React] BlueUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题描述

这里是 React 日期选择器组件报的错误，在一个活动列表点击编辑某行记录时控制台打印的错误。

部分错误信息：
Uncaught Invariant Violation: Minified React error #31; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=31&args[]=Tue%20Mar%2031%202020%2023%3A01%3A13%20GMT%2B0800%20(%E4%B8%AD%E5%9B%BD%E6%A0%87%E5%87%86%E6%97%B6%E9%97%B4)&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

在这里插入图片描述

问题分析

Uncaught Invariant Violation: Minified React error #31;
未捕获的不变的违规问题，缩小问题排查范围，错误码为 31；

类似的问题建议根据错误码查看对应的解决方案，此处 ErrorCode 为31，点击访问 Visit 后面的地址，查看报错原因，如下，其实已经给出了问题所在；无效的日期值。那这里和日期有关的就是活动有效期那个日期选择组件，此处是编辑页面，就是拿到数据渲染到日期组件上报错了，日期数据格式不支持，渲染的是无效的日期数据。无效的日期值。

Objects are not valid as a React child (found: Wed Mar 11 2020 23:59:59 GMT+0800 (中国标准时间)).

在这里插入图片描述
编辑页面可以看到，这里编辑页面日期值"2020-03-29 23:01:13"也渲染成功了，数据前端已经拿到了，就是不满足 React 日期组件要求的数据格式。
回到前端项目，编辑页面打开弹窗时，初始化动作有对活动有效期格式转换，打个日志跟踪下，可以看到是日期格式处理有误，处理后的日期格式不满足日期组件。
在这里插入图片描述

问题处理

方案提示此处的日期对象是无效的，Objects are not valid as a React child (found: Tue Mar 31 2020 23:01:13 GMT+0800 (中国标准时间))，就是编辑动作打开弹窗时对日期数据的格式转换不正确，这里转换为 Date 类型日期组件不支持，后端返回的数据格式就是正确的无需转换; 后端返回数据格式不满足的情况下可以在进行格式转换。moment(model.endTime).format(“YYYY-MM-DD HH:mm:ss”);