React项目中数组通过Props传递后无法显示的问题求助

在React项目中，我在父页面创建数组数据并通过Props传递给Table组件，但Table组件内的Grid组件无法展示数据。控制台能正常接收到传递的newData，但渲染失败。以下是相关代码及解决方案：

数据源与父页面处理代码 #

原始数据源 #

const newCompData = [
    {
      id: 1,
      comp: "McDonalds",
      feedback: "Best Food Chain",
      name: "Mike John",
      store: "Burger Store"
    },
    {
      id: 2,
      comp: "KFC",
      feedback: "Best Chicken Products",
      store: "Chicken Food",
      name: "Steve Williams"
    },
    {
      id: 3,
      comp: "Dominos",
      feedback: "Best Pizza Store",
      store: "Pizza Store",
      name: "Mark Rays",
    },
    {
      id: 4,
      comp: "Star Bucks",
      feedback: "Best Coffee Store",
      store: "Coffee Store",
      name: "Patrick Right",
    },
    {
      id: 5,
      comp: "Burger King",
      feedback: "Best Burgers",
      store: "Burger Store",
      name: "Williams Wills"
    },
    {
      id: 6,
      comp: "Lays",
      feedback: "Best Chips Factory",
      store: "Chips Store",
      name: "Sam Andrews",
    }
  ];

父页面数据处理与传值逻辑 #

const [dataAll, setDataAll] = useState([]);

useEffect(() => {
  const newData = newCompData?.map((data) => {
    return [{ id: data.id }, data.comp, data.store, data.name, data.feedback];
  });

  setDataAll(newData);
}, []);

return (
  <div className="App">
    <Table newData={dataAll} />
  </div>
);

Table组件代码 #

const Table = ({ newData }) => {
// 控制台可正常打印接收的newData
console.log("PROPS", newData);
  const store_grid_data = {
    data: newData,
    page_info: {
      total_pages: 5,
      current_page: 1
    }
  };

  let GridConfig = {};
  let grid_data = {};

  GridConfig = TableConfig;
  grid_data = store_grid_data;

  const [gridConfigData, setGridConfigData] = useState(GridConfig);
  const [gridData, setGridData] = useState(grid_data);

  return (
    <>
      <Grid GridConfig={gridConfigData} GridData={gridData} />
    </>
  );
};

问题分析 #

1. 数据格式不匹配：父组件map处理时，将每个对象转换成了[{id: ...}, comp, store, name, feedback]这种混合数组结构，而Grid组件期望的是与API返回一致的纯对象结构，格式不兼容导致渲染失败。
2. 状态未同步更新：Table组件用useState初始化gridData后，没有监听newData的变化，当父组件异步更新newData时，gridData状态未同步更新，Grid拿到的仍是初始空数据。

解决方案 #

步骤1：修正数据格式 #

将父组件的map逻辑改为保留对象结构，确保和API返回格式一致：

useEffect(() => {
  // 直接返回原对象，按需提取字段，保持对象结构
  const newData = newCompData?.map((data) => {
    return {
      id: data.id,
      comp: data.comp,
      store: data.store,
      name: data.name,
      feedback: data.feedback
    };
  });

  setDataAll(newData);
}, []);

步骤2：同步Props到组件状态 #

在Table组件中添加useEffect监听newData变化，同步更新gridData：

const Table = ({ newData }) => {
  const [gridConfigData, setGridConfigData] = useState(TableConfig);
  const [gridData, setGridData] = useState({
    data: [],
    page_info: {
      total_pages: 5,
      current_page: 1
    }
  });

  // 监听newData变化，更新gridData
  useEffect(() => {
    setGridData({
      data: newData,
      page_info: {
        total_pages: 5,
        current_page: 1
      }
    });
  }, [newData]);

  return (
    <>
      <Grid GridConfig={gridConfigData} GridData={gridData} />
    </>
  );
};

可选优化：直接使用Props（避免冗余状态） #

如果Grid组件支持直接响应Props更新，可省略内部状态，直接传递：

const Table = ({ newData }) => {
  const store_grid_data = {
    data: newData,
    page_info: {
      total_pages: 5,
      current_page: 1
    }
  };

  return (
    <>
      <Grid GridConfig={TableConfig} GridData={store_grid_data} />
    </>
  );
};

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