React渲染Exif数据报错：Objects are not valid as a React child([object Date])

报错原因 #

你遇到的Objects are not valid as a React child错误，核心原因是**DateTimeOriginal字段实际是一个Date对象**——虽然你贴出的JSON里它是字符串，但exif.fr解析Exif数据时，会自动把日期类字段转换为Date实例，而React无法直接渲染对象类型的子元素。你之前只排除了CreateDate和ModifyDate，但DateTimeOriginal同样被转成了Date对象，所以依然报错。

解决方案 #

不需要排除DateTimeOriginal，只需要把Date对象转换为字符串再渲染即可，同时优化代码的空值判断逻辑避免潜在问题。

修改后的组件代码：

import React from "react";
import { useContext } from "react";
import { Context } from "../hook/Context";

export default function Modal() {
  const { uploadso, onImageChange, imgDat, data } = useContext(Context);
  const [upload, setUpload] = uploadso;
  const [img, setImgData] = imgDat;
  const [datas, setData] = data;
  const omittedProps = ["CreateDate", "ModifyDate"];

  return (
    <div>
      {!upload && (
        <div>
          <input
            type="file"
            multiple
            accept="image/*"
            onChange={onImageChange}
          />
        </div>
      )}
      {/* 提前判断datas是否存在，避免空值调用map */}
      {!upload && !img && datas && (
        <div>
          {datas.map((each, dataIndex) => (
            {/* 给单张图片的Exif数据容器加唯一key */}
            <div key={dataIndex}>
              {Object.keys(each).map((key, index) => {
                if (omittedProps.includes(key)) return null;
                
                const fieldValue = each[key];
                // 识别Date对象并转为可读字符串
                const displayValue = 
                  typeof fieldValue === 'object' && fieldValue instanceof Date
                    ? fieldValue.toLocaleString() // 转为本地日期格式，也可用toISOString()保留原格式
                    : fieldValue;

                return (
                  <div key={index}>
                    {key}: {displayValue}
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

额外优化说明 #

1. 空值前置判断：在渲染datas.map前先确认datas存在，避免null/undefined时触发报错。
2. 列表key规范：给每个图片的Exif数据外层添加dataIndex作为key，符合React列表渲染的最佳实践。
3. 日期格式可选：如果需要保持原始ISO格式，把toLocaleString()替换为toISOString()即可。

内容的提问来源于stack exchange，提问作者gogolah