Uncaught Invariant Violation: Minified React error #31 问题的处理

问题描述

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

部分错误信息： Uncaught Invariant Violation: Minified React error #31; visit facebook.github.io/react/docs/… 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");

Power By niaonao, The End