Reactjs渲染嵌套JSON数据报对象不可作为React子元素错误怎么解决

错误原因 #

• 属性访问语法错误：你代码中log["TProgramLogSerialize"].["ProgramLog"].["TProgramLogItem"]的写法存在语法问题，使用方括号访问对象属性时不需要在方括号前额外加.，错误的写法会导致你无法获取到预期的数组，甚至拿到undefined或对象值。
• JSON导入路径不规范：你导入时写的import log from './logs/log'没有补全.json后缀，部分打包工具会识别失败，导致导入的内容不是目标JSON数据，而是模块对象。
• 补充：你提供的JSON示例存在冗余尾逗号，标准JSON解析规则不允许尾逗号，会直接报错导致解析后的log对象不符合预期。

当你错误获取到对象类型的值而非预期的字符串数组后，直接在JSX中渲染对象就会触发「Objects are not valid as a React child」报错，React不支持直接将对象作为DOM内容渲染。

修复方案 #

1. 先删除JSON文件中的所有冗余尾逗号，保证JSON格式符合标准规范
2. 修正App.js代码如下：

// 补全json后缀名保证导入正确
import log from './logs/log.json'

function App() {
    // 修正属性访问写法，添加可选链做空值兼容避免异常
    const data = log?.TProgramLogSerialize?.ProgramLog?.TProgramLogItem?.map((song, key) => (
        <li key={key}>{song.Description}</li>
    )) ?? []

    return (
        <ul>
          {data}
        </ul>
      );
}

export default App

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