React+Redux中createAsyncThunk重复请求致帖子重复显示问题排查

以下是针对帖子重复显示问题的具体排查方向及修正方案：

1. 排查组件中fetchPosts的dispatch逻辑 #

检查组件内触发dispatch(fetchPosts())的代码，常见问题是未正确设置useEffect的依赖数组，导致组件每次渲染都重复发起请求：

• 错误示例：

  useEffect(() => {
    dispatch(fetchPosts());
  }); // 无依赖数组，组件每次渲染都会执行dispatch
  

• 修正方式：

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]); // 添加依赖数组，仅组件挂载时执行一次
  

2. 检查posts切片的reducer处理逻辑 #

查看fetchPosts.fulfilled对应的reducer，确认是否错误地追加数据而非替换现有数据：

• 错误示例：

  case fetchPosts.fulfilled:
    return {
      ...state,
      posts: [...state.posts, ...action.payload] // 每次请求成功都追加数据，导致重复
    };
  

• 修正方式：

  case fetchPosts.fulfilled:
    return {
      ...state,
      posts: action.payload // 直接用新请求到的数据替换原数组
    };
  

3. 确认列表渲染的key属性是否正确 #

如果列表渲染时未使用帖子的唯一标识作为key，React可能会复用DOM元素导致显示异常：

• 错误示例：

  {posts.map((post, index) => (
    <PostItem key={index} post={post} /> // 用index作为key，数组变化时易出问题
  ))}
  

• 修正方式：

  {posts.map(post => (
    <PostItem key={post.id} post={post} /> // 使用帖子唯一id作为key
  ))}
  

4. 验证API请求是否被触发两次 #

打开浏览器开发者工具的Network面板，查看是否发送了两次相同的fetchPosts请求。如果是，进一步排查组件是否被重复挂载（比如路由配置问题、父组件重复渲染等）。

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