React渲染嵌套JSON数据时出现TypeError：无法读取undefined的'Company_Name'属性

我来帮你梳理下问题根源，你遇到的这个TypeError其实是几个细节没处理到位，咱们一步步来修复：

• 别用JavaScript关键字当变量名：你在map循环里用了new作为迭代变量，new是JS的保留关键字，这么写会直接导致语法错误，换成newsItem这类合法名字就行。

• 对数据结构理解有误：你的news.Items里的每一项是个包含id和news_values的对象，不是数组！所以代码里的new[0]完全是错的，应该先拿到当前项的news_values字段才对。

• news_values是JSON字符串，得先解析：从你控制台的输出能看到，news_values.S是一个被字符串化的JSON（带转义符的那种），你得先用JSON.parse()把它转换成能直接访问的JS对象，不然根本读不到里面的字段。

• 字段名完全不匹配：API返回的字段是"Company Name"（带空格），但你代码里写的是values.Company_Name（下划线），这肯定找不到对应属性啊！要么用括号访问values["Company Name"]，要么确保字段名和API返回的完全一致。

下面是修改后的完整代码，我标注了每个修改点，还加了一些容错处理：

import React, { useEffect, useState } from "react";
import "./App.css";
import configData from "./configData.json";
import axios from 'axios'

export default function App() {
  // 简化useState的写法，直接解构引入更清爽
  const [news, setNews] = useState([]);

  async function fetchNews() {
    const newsGetEndpoint = configData.GET_MEDICAL_NEWS;
    try {
      const response = await axios.get(newsGetEndpoint);
      setNews(response.data);
      console.log(response.data);
    } catch(error) {
      console.error(error)
    }
  }

  useEffect(()=> {
    fetchNews()
  }, [])

  return (
    <div>
      {news.Items?.length > 0 ? (
        <div>
          {/* 修改1：把new换成newsItem，避免关键字冲突 */}
          {news.Items.map((newsItem, id) => {
            try {
              // 修改2：解析news_values里的JSON字符串
              const parsedNewsValues = JSON.parse(newsItem.news_values.S);
              // 从解析后的数组里找到对应字段的项
              const companyInfo = parsedNewsValues.find(item => "Company Name" in item);
              const dateInfo = parsedNewsValues.find(item => "Date of Service" in item);
              const locationInfo = parsedNewsValues.find(item => "Location Name" in item);

              return (
                <div key={id} style={{ display: "flex", gap: "2rem", margin: "1rem 0" }}>
                  {/* 修改3：用括号访问带空格的字段名，加可选链避免字段缺失报错 */}
                  <div>Company Name: <span>{companyInfo?.["Company Name"]}</span></div>
                  <div>Date of Service: <span>{dateInfo?.["Date of Service"]}</span></div>
                  <div>Location Name: <span>{locationInfo?.["Location Name"]}</span></div>
                </div>
              )
            } catch (parseError) {
              // 容错：处理JSON解析失败的情况
              console.error("解析新闻数据失败：", parseError);
              return <div key={id}>无效的新闻数据</div>
            }
          })}
        </div>
      ) : (
        <div>No News from API</div>
      )}
    </div>
  )
}

额外说明一下：我加了try/catch来处理JSON解析可能失败的情况，还用到了find来从news_values的数组里定位到对应字段的对象，毕竟你的API返回的news_values是一个包含多个单字段对象的数组。另外用了可选链操作符?.，能避免某个字段不存在时再次抛出错误。

备注：内容来源于stack exchange，提问作者PhuongHoang6897