javascript - React-Waypoint 不适用于 MaterialUI 表

Question

我试图让 react-waypoint 在这张桌子上工作，但它似乎没有按应有的方式工作。我正在尝试加载显示仅在视口上可见的内容。现在它只显示虚拟数据，但是当我有超过 2000 行时，它的加载速度非常慢。

export default function TableContent(props) {

  const classes = useStyles();  

const [limit, changeLimit] = useState(12);

  const limitHandler = (newlimit) => {
    if(newlimit > limit)
   changeLimit(newlimit)
  }
console.log([props.API_DATA,props.filters])

    return (
        <>    

        
        <TableBody >
         
        {props.API_DATA.map((row,index) => (
           <>
           <TableRow  key={row.name}>
            <TableCell style={{ textAlign:"left", width:'5%'}} align="center">{index + 1}</TableCell> 
              <TableCell style={{ textAlign:"left", width:'25%'}}   align="center">{row.bnd}</TableCell> 
              <TableCell style={{ textAlign:"left", width:'5%'}}  align="center">{row.cnt}</TableCell>
              <TableCell style={{ textAlign:"left", width:'20%'}}  align="center">{row.prt.map((e) => <span   key={e}><span style={{backgroundColor:"#FFD9B6", padding:"1px",display:"flex",width:"80px", border:"0.5px solid orange", margin: "10px 0px", borderRadius:"3px"}}>{e}</span></span>)}</TableCell>
              <TableCell style={{ textAlign:"left", width:'20%'}}  align="center">{row.cat.map((e) =><span  key={e}><span style={{backgroundColor:"#F28808", padding:"1px", display:"flex",width:"50px", border:"0.5px solid orange", borderRadius:"3px", margin: "10px 0px"}}>{e}</span></span>)}</TableCell>
              <TableCell style={{ textAlign:"left", width:'25%'}}  align="center"><a href={row.url}>{row.url}</a></TableCell>
            </TableRow>
            <Waypoint onEnter={()=>limitHandler(index + 10)}/>
          </>
          ))}
          
        </TableBody>

        </>
    )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是沙盒链接： https ://codesandbox.io/s/weathered-architecture-ivpcj

标签： javascriptreactjsmaterial-ui