Strapi React绑定Material UI数据表问题

我是一个新手,我已经用strapi创建了一个后端,我已经测试了graphQl查询,并检查了它是否返回了查询中所有节点的值。

现在,为了做出反应,我使用Material UI DataGrid组件,并且我可以基于我的查询填充大多数节点,除了那些具有嵌套节点的节点。 但在控制台日志中,我正在返回所有节点的值,所以我想我的问题一定是在数据表的代码中?

我看不到lead.leadSourceName和联系人节点的所有值,包括联系人节点中的notes节点,当单击一行时,所有这些都会以模式打开。模态确实打开,但值未定义。 再次,在控制台日志中,将显示所有节点的所有值。

这是我的代码:

import React, { useState } from 'react';
import { useQuery } from '@apollo/client';
import { DataGrid } from '@material-ui/data-grid';
import { Modal, Typography, Box } from '@material-ui/core';
import ReactMarkdown from 'react-markdown';
import gql from 'graphql-tag';

const GET_COMPANIES_QUERY = gql`
  query {
    companies {
      data {
        id
        attributes {
          companyName
          status
          internship
          futureMinEmp
          futureMaxEmp
          leads {
            leadSourceName
          }
          contact {
            firstName
            lastName
            jobtitle
            lastContact
            nextContact
            notes {
              date
              note
            }
          }
        }
      }
    }
  }
`;

const columns = [
    { field: 'companyName', headerName: 'Company Name', flex: 1, headerAlign: 'center' },
    { field: 'status', headerName: 'Status', flex: 1, headerAlign: 'center' },
    { field: 'internship', headerName: 'Internship', flex: 1, headerAlign: 'center' },
    { field: 'futureMinEmp', headerName: 'Min Employees', flex: 1, headerAlign: 'center' },
    { field: 'futureMaxEmp', headerName: 'Max Employees', flex: 1, headerAlign: 'center' },
    {
        field: 'leads',
        headerName: 'Leads',
        flex: 1,
        headerAlign: 'center',
        valueGetter: (params) => {
          const leads = params.row.attributes?.leads;
          if (typeof leads === 'object' && leads !== null && leads.hasOwnProperty('leadSourceName')) {
            console.log('LEADS OBJECT:', leads); // add this line to log the value of the leads object
            return leads.leadSourceName;
          } else {
            return 'No leads';
          }
        },
      },
      
      
  ];

  
  

const CompaniesPage = () => {
  const [selectedContact, setSelectedContact] = useState(null);
  const { loading, error, data } = useQuery(GET_COMPANIES_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  const companies = data?.companies?.data?.map((company) => {
    console.log('Company:', company);
    const leads = Array.isArray(company.attributes?.leads) && company.attributes.leads.length > 0
      ? company.attributes.leads.map((lead) => lead.leadSourceName).join(', ')
      : 'No leads';
    return {
      id: company.id,
      ...company.attributes,
      leads,
    };
  });

  const handleRowClick = (params) => {
    console.log('Selected contact:', params.row.contact);
    setSelectedContact(params.row.contact);
  };

  const handleCloseModal = (event) => {
    event.preventDefault();
    setSelectedContact(null);
  };

  return (
    <>
      <DataGrid
  rows={companies}
  columns={columns}
  autoHeight
  onRowClick={handleRowClick}
  getRowClassName={(params) => {
    // add class name to row based on condition
    return params.row.contact ? 'clickable-row' : '';
  }}
/>




      <Modal open={!!selectedContact} onClose={handleCloseModal} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Box bgcolor="background.paper" boxShadow={2} p={2} style={{ outline: 'none' }}>
          <Typography variant="h4">
            {selectedContact ? `${selectedContact.firstName} ${selectedContact.lastName}` : ''}
          </Typography>
          <Typography variant="subtitle1">{selectedContact ? selectedContact.jobtitle : ''}</Typography>
          <Typography variant="subtitle2">{selectedContact ? `Last Contact: ${selectedContact.lastContact}` : ''}</Typography>
          <Typography variant="subtitle2">{selectedContact ? `Next Contact: ${selectedContact.nextContact}` : ''}</Typography>
          <ReactMarkdown>{selectedContact?.notes?.[0]?.note}</ReactMarkdown>
        </Box>
      </Modal>
    </>
  );
};

export default CompaniesPage