2

最近我一直在为列表的分页而苦苦挣扎。

问题

该列表的每个元素都包含一个小地图和其他一些信息。该列表在没有分页的情况下以正确的方式显示每一行的地图，但是当该列表的大小超过约 50 个元素时（因为 Google Map 的每个实例都不轻），我会遇到性能问题。

这就是为什么我添加了一个分页系统，以便页面在所有客户端设备上都能顺利运行。问题是当我浏览页面时，列表项的内容发生了变化，但地图内容没有更新。换句话说，分页似乎可以浏览我想要显示的行，但谷歌地图实例只显示第一页的内容并且没有更新。

涉及的代码

该地图是使用以下内容创建的：

const mapCentered = (data, center) => {
    return (
        <div style={{ height: '150px', width: '150px' }}>
            <GoogleMapReact
            bootstrapURLKeys={{ key: "myKey" }}
            defaultCenter={center}
            defaultZoom={19}
            options={map => ({ 
                mapTypeId: map.MapTypeId.SATELLITE,
                ...
            })}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({ map, maps }) => {
                // Construct the polygon.
                var triangle = new maps.Polygon({
                    paths: data,
                    ...
                });
                triangle.setMap(map);
            }}
            >
            </GoogleMapReact> 
        </div>
    )
}

结果列表（的rows）是使用创建的：

data.map((result, index) => { 
    var googleMapsCoords = result.coord;
    const center = result.center;

    rows.push(
    <div id={index}>
        <ListItem>
            <Grid container direction="row" spacing={1}>
                <Grid item xs={5}>
                {mapCentered(googleMapsCoords, center)}
                </Grid>
                // some more code
            </Grid>
        </ListItem>
    </div>
    )
}

最后分页由以下人员处理：

<Table className={classes.table} aria-label="pagination table" >
      <TableBody>
      {(rowsPerPage > 0
          ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
          : rows
      ).map((row, index) => {
          return (
          <TableRow key={row.name}>
             <TableCell component="th" scope="row">
                  <div>
                      {row}
                  </div>
              </TableCell>
          </TableRow>
          )}
      )}
      </TableBody>
      <TableFooter>
          // the footer
      </TableFooter>
</Table>

我不明白为什么rows不处理 Google Map 实例的内容。是因为切片吗？或者我在填充时创建它的方式rows？

在此先感谢您提供有关此的任何提示！

干杯

4

0 回答 0