控制台有数据但React组件渲染显示undefined问题求助

通过RTK Query拉取数据渲染MUI可折叠表格，表格结构正常，控制台显示数据已传递到子Row组件，但实际渲染时数据显示undefined。多次使用相同方法均无问题，找不到问题所在。

代码示例 #

function Row(data) {
    console.log("data ", data) // 数据成功传递到这里...

  const visitId = data.id;
  const [open, setOpen] = useState(false);

  const [deleteVisit] = useDeleteVisitMutation();

  const formatDate = (visitStart) => {
    const date = new Date(visitStart);
    let options = {
      year: "numeric",
      month: "numeric",
      day: "numeric",
    };
    return date.toLocaleDateString("en-US", options);
  };

  return (
    <>
      <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">
          {data?.user?.fullName} {console.log("user in data", data?.user?.fullName)} // 这里及所有数据值都是undefined
        </TableCell>
        <TableCell align="center">{formatDate(data?.visitStart)}</TableCell>
        <TableCell align="center">
            <span display='inline-flex'>
          <DirectEditVisit visitId={visitId} visit={data} />
          <IconButton onClick={() => deleteVisit(visitId)}>
            <DeleteIcon />
          </IconButton>
          </span>
        </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">
                Progress Notes
              </Typography>
              <Table size="small" aria-label="notes">
                <TableHead>
                  <TableRow>
                    <TableCell>Goal</TableCell>
                    <TableCell>Notes</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {data?.goals?.map((goal) => (
                    <TableRow key={goal._id}>
                      <TableCell component="th" scope="row">
                        {goal.title}
                      </TableCell>
                      <TableCell>{goal.note}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </>
  );
}

const ProgNotesTab = () => {
  const { clientId } = useParams();

  const { data, isLoading, isSuccess } = useGetVisitsByClientIdQuery(clientId);

  let content;

  if (isLoading) {
    content = <CircularProgress />;
  } else if (isSuccess) {
    content = (
      <div>
        <Box sx={{ display: "flex", height: "100%", width: "100%" }}>
          <TableContainer component={Paper}>
            <Table aria-label="Progress Notes">
              <TableHead>
                <TableRow>
                  <TableCell />
                  <TableCell>Staff</TableCell>
                  <TableCell>Date</TableCell>
                  <TableCell>Edit/Delete</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {data && data.map((i) => (
                  <Row key={i._id} data={i} />
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </Box>
      </div>
    );
  }

  return (
    <div>
      <div>{content}</div>
    </div>
  );
};

export default ProgNotesTab;

控制台输出 #

data: Object { client: "6205a8313fe12d6b4ec354c4", location: "Los Angeles Court", visitStart: "2022-04-13T18:00:53.000Z", … }
​​
client: "6205a8313fe12d6b4ec354c4"
​​
createdAt: "2022-04-13T18:23:15.712Z"
​​
goals: Array(3) [ {…}, {…}, {…} ]
​​​
0: Object { title: "Cook", note: "Cook stuff", marked: true, _id: "631f6a7de4c79fe85dc94c3a" }
​​​
1: Object { title: "Budget", note: "Budget finances", marked: true, … }
​​​
2: Object { title: "Clean", note: "Clean stuff", marked: true, _id: "631f6a7de4c79fe85dc94c3c" }
​​​
length: 3
​​​
<prototype>: Array []
​​
id: "62571513ec41c091181dd828"
​​
location: "Los Angeles Court"
​​
totalHours: 1
​​
updatedAt: "2022-09-12T17:21:01.917Z"
​​
user: Object { _id: "62194175bcd77d7f4bfa97ea", fullName: "Danny Trejo" }
​​
visitEnd: "2022-04-13T19:00:00.000Z"
​​
visitStart: "2022-04-13T18:00:53.000Z"

问题核心是Row组件的props接收方式错误：React组件的第一个参数是props对象，你传递的data={i}是这个对象里的一个属性，但你直接把props对象当成了业务数据来使用。

修正方式一：解构props #

直接从props中取出data属性，这是React中最常用的写法：

function Row({ data }) {
    console.log("data ", data) // 现在这里的data就是你传递的业务数据
    const visitId = data.id;
    // 后续所有使用data的代码保持不变即可
}

修正方式二：通过props访问 #

如果不想解构，可以显式从props对象中获取data属性：

function Row(props) {
    const data = props.data;
    console.log("data ", data)
    const visitId = data.id;
    // 后续代码正常使用data
}

修改后，data?.user?.fullName等数据字段就能正确获取并渲染了。

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