Question

你好，我正在制作一个管理页面。如果我从表中选择一个站点对象，它应该应用于所选的应用程序管理员用户。

我可以提供图片帮助理解

所以左边的时间戳是一个应用程序，底部的表格是站管理员用户可以选择的。

假设我的整个视图是ParentView，parentView 向StationTable 组件提供站点数据，当管理员用户通过单击按钮选择站点时，它会将onClick 函数传递给ParentView。

父视图

export default function ParentView(props) {
 
  const [applications, setApplications] = React.useState([]);
  const [application, setApplication] = React.useState(null);
  const [value, setValue] = React.useState(0);
  const [waitingStations, setWaitingStations] = React.useState(null);
  const [selectedStation, setSelectedStation] = React.useState(null);

 const select = (id) => {
    const selected = waitingStations.find((e) => e.id === id);
    console.log("called too many time", selected);

    setSelectedStation(selected);
    return;
  };

React.useEffect(() => {
    (async () => {
     const result = await fetchApplications()
      setApplications(result);
    })();
    (async () => {
           const result = await fetchWaitingStations()
;
      setWaitingStations(result);
    })();
    console.log("어플리케이션스", waitingStations);
  }, []);

return(
 <div>
  <StationTable toParent={select} data={waitingStations} />
   </div>
)

站台

export default function StationTable(props) {
  const classes = useStyles();
 
  const dataFrom = props.data;
  
  return (
    <TableContainer
      component={Paper}
      style={{
        boxSizing: "border-box",

        display: "inline",
        overflow: "hidden"
      }}
    >
      <Table className={classes.table} size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell>스테이션 아이디</TableCell>
            <TableCell align="right">구매자</TableCell>
            <TableCell align="right">구매자수익률&nbsp;</TableCell>
            <TableCell align="right">세일즈수익률&nbsp;</TableCell>

            <TableCell align="right">승인날짜&nbsp;</TableCell>
            <TableCell align="right">선택&nbsp;</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {dataFrom &&
            dataFrom.map((row) => (
              <TableRow key={row.id}>
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell align="right">{row.data.buyer}</TableCell>
                <TableCell align="right">{row.data.buyerPortion}%</TableCell>
                <TableCell align="right">{row.data.salesPortion}%</TableCell>

                <TableCell align="right">
                  {common.timeStampToString(row.data.confirmedBy)}
                </TableCell>
                <TableCell align="right">
                  <Button onClick={props.toParent(row.id)}>Button</Button>
                </TableCell>
              </TableRow>
            ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

admin 用户点击按钮时会调用 select 函数，这会导致渲染过多。

我通过搜索很多帖子找到了这个解决方案，我认为这不是一个好方法。

我希望我能理解为什么它会导致渲染太多如果有更好的方法会是什么。

谢谢

将数据子组件传递给父组件时阻止渲染

0 个答案: