React中如何点击Cards组件时向独立TableData组件传递数组数据

你当前的代码存在两个核心问题：

1. 你把<TableData>放在了Data.map的循环里，会渲染出和卡片数量一致的表格组件，不符合点击单个卡片传值的需求
2. TableData组件直接把props传入的row作为state初始值，后续props更新时state不会同步变化

第一步：修改Cards.js组件逻辑 #

在Cards组件中新增状态存储当前点击的卡片数据，点击卡片时更新状态，再把状态值传给TableData组件即可，修改后的代码参考：

import { useState } from 'react';
// 其他import代码省略

function Cards() {
  // 新增状态：存储当前选中的卡片数据
  const [selectedRow, setSelectedRow] = useState(null);

  return (
    <div>
      {/* 只渲染一次TableData，选中数据后才显示 */}
      {selectedRow && <TableData row={selectedRow}/>}

      {Data.map((items, index) => {
        return (
          <Card
            key={index}
            className={classes.root}
            onClick={() => {
              // 点击卡片时把当前item存入状态
              setSelectedRow(items);
            }}
          >
            {/* 卡片内部内容代码省略 */}
          </Card>
        )
      })}
    </div>
  )
}

第二步：修改TableData.js组件逻辑 #

如果不需要对传入的row做内部修改，直接使用props传入的row即可，不需要额外声明内部state；如果需要内部修改，需要监听props.row的变化同步更新state：

无需内部修改row的写法： #

// 其他import代码省略

function TableData({row}) {
  const classes = useStyles();

  return (
    <div>
      {row.map((e, index) => {
        console.log(e);
        // 渲染表格行的代码省略
        return <tr key={index}>{/* 单元格内容 */}</tr>
      })}
    </div>
  )
}

需要内部修改row的写法： #

import { useState, useEffect } from 'react';
// 其他import代码省略

function TableData({row}) {
  const classes = useStyles();
  const [rows, setRows] = useState(row);

  // 监听props.row变化，同步更新内部state
  useEffect(() => {
    setRows(row);
  }, [row]);

  return (
    <div>
      {rows.map((e, index) => {
        console.log(e);
        // 渲染表格行的代码省略
        return <tr key={index}>{/* 单元格内容 */}</tr>
      })}
    </div>
  )
}

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