问数组不是在映射函数中在表中呈现，而是在console.logs中呈现

EN

function AllPersonnel(props) {

  let personnel = []
  let cols = [
    { path: "first_name", name: "First Name" },
    { path: "last_name", name: "Last Name" },
    { path: "section", name: "Section" },
    { path: "role", name: "Role" },
    { path: "employee_type", name: "Employee Type" },
  ];

  const handleCallback = (data) => {
    personnel.push(data)
  };
 
  return (
    <div>
      <h1>Personnel</h1>
      <div>
        {props.personnel.edges.map(({ node }) => {
          return (
            <Personnel
              key={node.__id}
              personnel={node}
              parentCallback={handleCallback}
            />
          );
        })}
      </div>

      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              {cols.map((col) => {
                return <TableCell key={col.path}>{col.name}</TableCell>
              })}
            </TableRow>
          </TableHead>

          <TableBody>
            {console.log(personnel)} // this prints fine. will attach screenshot

            {personnel.map((row, i) => {
              {console.log("HERE")} // this does not print. I can't get into this map statement and I see no errors
              return (
                
                <TableRow key={row.id}>
                  
                  {console.log(row.first_name)}
                  <TableCell >
                    {row.first_name}
                  </TableCell>
                  <TableCell >{row.last_name}</TableCell>
                  <TableCell >{row.section}</TableCell>
                  <TableCell >{row.role}</TableCell>
                  <TableCell >{row.employee_type}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

export default createFragmentContainer(AllPersonnel, {
  personnel: graphql`
    fragment AllPersonnel_personnel on PersonnelConnection {
      edges {
        node {
          ...Personnel_personnel
        }
      }
    }
  `,
});

function Personnel(props) {
  const data = [
    {
      id: props.personnel.id,
      first_name: props.personnel.first_name,
      last_name: props.personnel.last_name,
      section: props.personnel.section,
      role: props.personnel.role,
    },
  ];

  props.parentCallback(data); // sends back one row at a time, 252 times in this case

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

export default createFragmentContainer(Personnel, {
  personnel: graphql`
    fragment Personnel_personnel on Personnel {
      id
      first_name
      last_name
      section
      role
      employee_type
      PersonnelFromResource {
        position
        notes
      }
      PersonnelFromEngagement {
        cover_term
        sector
      }
    }
  `,
});