TypeScript React多帖子轮播渲染错误：共用索引致内容混乱

核心问题 #

你现在所有帖子共用了同一个postIndex状态变量，不管点击哪个帖子的切换按钮，都会修改这个全局索引，导致所有帖子的轮播内容同步变化，这就是切换时显示错误数据的原因。

解决方案：为每个帖子封装独立的轮播组件 #

把单个帖子的图片轮播逻辑抽成独立组件，让每个组件自己管理专属的索引状态，这样各个帖子的轮播操作就不会互相干扰了。

1. 封装独立的轮播组件

import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleRight, faAngleLeft } from '@fortawesome/free-solid-svg-icons';

// 定义组件接收的参数类型
interface PostImageCarouselProps {
  postImages: string[];
  username: string;
}

export const PostImageCarousel = ({ postImages, username }: PostImageCarouselProps) => {
  // 每个组件自己维护索引状态
  const [postIndex, setPostIndex] = useState(0);

  return (
    <div className="post-image">
      {postImages.length > 1 && (
        <>
          <div className="post-image-count">
            {postIndex + 1}/{postImages.length}
          </div>
          <button
            type="button"
            className="post-image-forwards"
            onClick={() =>
              setPostIndex(
                postIndex === postImages.length - 1
                  ? 0
                  : postIndex + 1
              )
            }
          >
            <FontAwesomeIcon icon={faAngleRight} />
          </button>
          <button
            type="button"
            className="post-image-backwards"
            onClick={() =>
              setPostIndex(
                postIndex === 0
                  ? postImages.length - 1
                  : postIndex - 1
              )
            }
          >
            <FontAwesomeIcon icon={faAngleLeft} />
          </button>
        </>
      )}
      
      {postImages.map((image: string, index: number) => (
        <img
          key={index}
          className={`${postIndex === index ? "active" : "inactive"}`}
          src={image}
          alt={username}
        />
      ))}   
    </div>
  );
};

2. 在父组件中复用这个组件

把每个profile的数据传入组件即可，甚至可以把所有profile放到数组里循环渲染，减少重复代码：

// 假设你有多个profile数据
const profiles: Profile[] = [profile1, profile2];

// 循环渲染所有帖子
{profiles.map((profile, idx) => (
  <div key={idx} className="post">
    {/* 这里可以放帖子的其他内容，比如用户名、头像、标题等 */}
    <PostImageCarousel 
      postImages={profile.postImages} 
      username={profile.username} 
    />
  </div>
))}

这样每个帖子的轮播状态完全独立，点击切换按钮只会影响当前帖子的图片显示，不会再出现串数据的问题。

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