地图函数中的数组未在 table 中呈现，但在 console.logs 中呈现

Question

我正在获取从子组件传回的 personnel 数组数据。当我在尝试渲染它之前尝试 console.log(personnel) 时，它打印得很好，但是当我尝试使用 map 函数在 table 中渲染它时，它什么也没给我。我什至无法在地图功能中进行控制台登录。

这是我的父组件，我想在其中呈现 table 中的 personnel 数组。

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
        }
      }
    }
  `,
});

当我尝试使用 useState 钩子而不是数组时，它会无限地重新呈现并给我错误

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

这是我的子组件。很简单，每次传回一行添加到父组件中的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
      }
    }
  `,
});

Answer 1

personnel 是一个静态数组，组件不会re-render发生变化。要使组件重新渲染，您必须将其设置为状态

所以你从 react 导入 useState import React, {useState} from 'react; 然后将 let personnel = [] 更改为 const [personnel , setPersonnel] = useState([]); 并在回调中将 personnel.push(data) 改为 setPersonnel((prevData)=>[...prevData , data])

地图函数中的数组未在 table 中呈现，但在 console.logs 中呈现

Array not rendering in table within map function but console.logs

relay

reactjs

material-ui