React-waypoint仅首次触发日志问题：模仿Ben Awards视频实现无限滚动时的异常排查

看起来你遇到的问题主要来自DOM结构不合法、重复计算数据、key值不唯一，以及Waypoint的位置检测逻辑这几个方面，我来一步步帮你解决：

1. 缓存渲染数据，避免重复计算 #

你现在在map回调里每次都调用createData(props.filteredData, "flavs", limit)，这不仅会造成性能浪费，还可能因为每次调用生成新数组，导致length计算出现偏差。先把数据提前存到变量里：

// 在组件渲染逻辑开头先计算好要渲染的数据
const renderedRows = createData(props.filteredData, "flavs", limit);

return (
  <TableBody>
    {renderedRows.map((row, i) => (
      // 这里用Fragment没问题，但要确保key唯一
      <React.Fragment key={`${row.name}-${i}`}>
        <Row row={row} />
        {/* 后续调整Waypoint的位置 */}
      </React.Fragment>
    ))}
  </TableBody>
);

2. 修复表格中的Waypoint DOM结构 #

如果你的<Row>组件渲染的是<tr>元素，那么<TableBody>的子元素只能是<tr>，直接把Waypoint放在Fragment里会生成非法的DOM结构（Waypoint默认会渲染一个<div>），浏览器会自动修正这个结构，导致Waypoint的位置检测完全失效。

你需要把Waypoint包裹在合法的表格元素中：

{renderedRows.map((row, i) => (
  <React.Fragment key={`${row.name}-${i}`}>
    <Row row={row} />
    {/* 若要检测滚动到底部，只在最后一条数据后放置Waypoint */}
    {i === renderedRows.length - 1 && (
      <tr>
        {/* colSpan设为你表格的列数，或用"*"适配所有列 */}
        <td colSpan="*" style={{ padding: 0 }}>
          <Waypoint onEnter={() => console.log(`Reached index: ${i}`)} />
        </td>
      </tr>
    )}
  </React.Fragment>
))}

3. 确保key值唯一 #

你之前用row.name作为Fragment的key，如果有重复的name，React会错误地复用组件，导致Waypoint的状态混乱。结合索引或者行数据的唯一ID（如果有的话）来生成key，保证每个条目唯一。

4. 调整Waypoint的触发逻辑 #

你原来的条件是i === createData(...).length -10，如果你的需求是滚动到倒数第10条时触发加载，那没问题，但要确保每次渲染时这个位置的Waypoint是唯一的。如果是要模拟视频里的“渲染最后一条数据的索引”，那应该放在最后一条数据之后（也就是i === renderedRows.length -1）。

5. 检查createData函数的正确性 #

最后，确认createData函数在limit变化时返回的数组是正确的：比如当limit从50增加到100时，应该返回包含100条连续的数据，而不是重复或截断的内容。如果这个函数有问题，也会导致索引计算异常。

按照上面的步骤调整后，你应该能像视频里那样，每次滚动到Waypoint位置时正确打印对应的索引，滚动返回时也能正常触发。

内容的提问来源于stack exchange，提问作者Shuib Abdillahi