求助：MUI可折叠表格props传递与createData数据处理问题

1. 先让组件接收父组件传入的calls props #

你的CollapsibleTable组件没接收App.js传来的calls，先补上：

export default function CollapsibleTable({ calls }) {
  // 内部逻辑写在这里
}

2. 把rows的生成逻辑移到组件内部，依赖calls更新 #

原来的rows定义在组件外部，API数据回来后不会重新生成，改用useMemo缓存，只有calls变化时才重新计算：

import { useMemo } from 'react';

export default function CollapsibleTable({ calls }) {
  const rows = useMemo(() => {
    if (!calls) return [];
    const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
    return days.map(day => createData(day, calls));
  }, [calls]);

  // 其他渲染逻辑...
}

3. 修复createData函数的逻辑错误 #

原函数的判断和循环逻辑完全错误，重新调整：

function createData(day, callData) {
  // 假设API返回的calls是按天为key的对象，比如{ Monday: [...], Tuesday: [...] }
  const dayData = callData[day] || [];
  return {
    day,
    data: dayData,
  };
}

如果你的API数据结构不同，只需调整callData[day]的取值方式即可。

4. 修复Row组件的渲染错误 #

Row组件不需要自己维护callData状态，直接用传入的row props，同时遍历数据时要取当前项的属性，key要保证唯一：

function Row({ row }) {
  const [open, setOpen] = React.useState(false);

  return (
    <React.Fragment>
      <TableRow sx={{ "& > *": { borderBottom: "unset" } }}>
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          {row.day}
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <Box sx={{ margin: 1 }}>
              <Typography variant="h6" gutterBottom component="div">
                History
              </Typography>
              <Table size="small" aria-label="purchases">
                <TableHead>
                  <TableRow>
                    <TableCell>Volunteer Name</TableCell>
                    <TableCell>Phone Number</TableCell>
                    <TableCell align="right">Senior Name</TableCell>
                    <TableCell align="right">Phone Number</TableCell>
                    <TableCell align="right">Time</TableCell>
                    <TableCell align="right">Day</TableCell>
                    <TableCell align="right">Phone Line</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {row.data.map((rowData, index) => (
                    <TableRow key={index}>
                      <TableCell component="th" scope="row">
                        {rowData.volunteerName}
                      </TableCell>
                      <TableCell>{rowData.volunteerPhoneNumber}</TableCell>
                      <TableCell align="right">{rowData.seniorName}</TableCell>
                      <TableCell align="right">{rowData.seniorPhoneNumber}</TableCell>
                      <TableCell align="right">{rowData.Time}</TableCell>
                      <TableCell align="right">{rowData.day}</TableCell>
                      <TableCell align="right">{rowData.phoneNumber}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  );
}

5. 清理多余代码 #

删掉Row组件里自己定义的callData状态和对应的useEffect，数据完全通过父组件传入的row props获取即可。

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