Facebook Page Plugin帖子重复问题：React集成场景下的排查与解决

潜在原因分析 #

• 分页参数处理错误：这个SP FX插件大概率在调用Facebook Graph API时，没正确使用分页游标。Facebook的帖子接口依赖after游标来获取下一页数据，如果插件没存储或传递这个游标，会反复请求第一页内容，导致帖子重复。
• 组件重复触发请求：React组件的useEffect依赖项设置不当，比如依赖了频繁变化的状态，会导致组件重渲染时重复发起请求。新旧请求的返回数据叠加，就会出现重复帖子。
• 缺少数据去重逻辑：插件可能直接把API返回的内容追加到列表里，没有校验帖子ID是否已存在。如果网络波动导致重复请求，或者API返回重复数据，就会直接展示重复内容。

解决方案 #

1. 修复分页游标传递逻辑 #

检查插件中调用Graph API的代码，确保每次请求下一页时，正确传入上一页返回的after游标：

const [afterCursor, setAfterCursor] = useState(null);
const [posts, setPosts] = useState([]);
const [hasMore, setHasMore] = useState(true);

const fetchPosts = async () => {
  if (!hasMore) return;
  
  const params = new URLSearchParams({
    access_token: '你的访问令牌',
    fields: 'id,message,created_time,full_picture',
    limit: 5
  });
  
  if (afterCursor) {
    params.append('after', afterCursor);
  }

  const res = await fetch(`https://graph.facebook.com/v18.0/你的页面ID/posts?${params}`);
  const data = await res.json();

  // 追加新数据
  setPosts(prev => [...prev, ...data.data]);
  
  // 更新游标，没有更多数据则停止加载
  if (data.paging?.cursors?.after) {
    setAfterCursor(data.paging.cursors.after);
  } else {
    setHasMore(false);
  }
};

确保不要硬编码分页参数，也不要在每次请求时重置游标。

2. 控制请求触发时机 #

调整useEffect的依赖项，只在游标变化时发起请求，同时添加加载状态避免并发请求：

const [isLoading, setIsLoading] = useState(false);

const fetchPosts = async () => {
  if (isLoading || !hasMore) return;
  setIsLoading(true);
  
  try {
    // 上面的请求逻辑
  } finally {
    setIsLoading(false);
  }
};

useEffect(() => {
  fetchPosts();
}, [afterCursor]); // 仅当游标更新时请求下一页

3. 添加数据去重逻辑 #

更新帖子列表时，通过帖子的唯一ID去重，避免重复内容：

setPosts(prev => {
  const existingPostIds = new Set(prev.map(post => post.id));
  const uniqueNewPosts = data.data.filter(post => !existingPostIds.has(post.id));
  return [...prev, ...uniqueNewPosts];
});

最佳实践 #

• 坚持使用游标分页：Facebook Graph API推荐用after/before游标分页，不要用offset，后者在页面数据更新时容易出现重复或漏数据的问题。
• 添加请求节流：如果是滚动加载场景，给加载逻辑加节流处理，比如用lodash.throttle，避免短时间内触发多次请求。
• 监控API返回：开发时打印API返回的data和paging字段，确认游标是否正确传递，数据是否重复。
• 错误处理：给请求添加try/catch，请求失败时提示用户，避免静默失败导致的异常数据展示。
• 缓存已加载内容：可以用localStorage缓存已加载的帖子ID，页面刷新后重新加载时，跳过已获取过的内容。

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