React组件无法读取Prop对象中子数据的问题求助

1. 为何summaryData本身打印正常，但子数据显示undefined？ #

你控制台看到的summaryData其实是JSON字符串，并非JavaScript对象。浏览器控制台会自动把格式合规的JSON字符串渲染成对象样式，但它本质还是字符串类型。字符串没有columns和data属性，因此直接访问时会返回undefined。

你可以在控制台打印typeof summaryData验证，结果会是string而非object。

2. 如何修改代码正确访问子数据并渲染表格？ #

方案一：在父组件完成数据解析 #

如果数据来自API请求，确保传递给子组件前已将JSON字符串转为JavaScript对象：

• 使用fetch时：const res = await fetch(url); const summaryData = await res.json();
• 手动解析：const parsedData = JSON.parse(rawServerData);

方案二：子组件内部添加防御性处理 #

若无法确保父组件传递的是解析后的对象，可以在子组件中先处理数据：

修改后的组件代码：

import React from 'react';

const CalorySimulationTable = ({summaryData, onSelectOption }) => {
  // 处理数据解析逻辑
  let parsedData = {};
  if (summaryData) {
    if (typeof summaryData === 'string') {
      try {
        parsedData = JSON.parse(summaryData);
      } catch (err) {
        console.error('解析summaryData失败:', err);
      }
    } else {
      parsedData = summaryData;
    }
  }

  const columns = parsedData.columns || [];
  const data = parsedData.data || [];

  // 校验数据格式
  if (!Array.isArray(columns) || !Array.isArray(data)) {
    return <div>Invalid or missing data.</div>;
  }

  const formattedColumns = columns.map(col => col.toString());
  return (
    <table>
      <thead>
        <tr>
          {formattedColumns.map((col, index) => <th key={index}>{col}</th>)}
        </tr>
      </thead>
      <tbody>
        {data.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {row.map((cell, cellIndex) => (
              <td key={cellIndex}>{cell}</td>
            ))}
            <td>
              <button onClick={() => onSelectOption(columns[rowIndex])}>
                Select
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default CalorySimulationTable;

额外提示 #

• 加try-catch避免JSON解析失败导致组件崩溃
• 尽量在数据源头（父组件/API请求层）完成解析，让子组件专注于渲染逻辑，保持职责单一

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