Typescript React Props渲染错误的项

Question

我是Typescript的新手，已经被这个问题困了一段时间了。我试图为每个帖子渲染一组图像，想想instagram的网格以及用户如何能够通过旋转木马点击。然而，每次我输入新数据时，整个instagram网格只渲染最后一个对象数据。我希望能够从profile2数据等渲染profile1帖子。这是我的代码。

export interface Profile {
type?: string;
caption: string;
location: string | null;
profileImage: string;
username: string;
postImages: Array<string>;
comments: Array<Comment> | null;
liked: boolean;
likes: Array<Like> | null;
favorited: boolean;
datePosted: string;
tagged: Array<Tag> | null;
verified: boolean;
profilePic?: string;
posts?: number;
followers?: number;
following?: number;
}

Profile1帖子

<div className="post-image">
{profile1.postImages.length > 1 && (
<>
<div className="post-image-count">
{postIndex + 1}/{profile1.postImages.length}
</div>
<button
type="button"
className="post-image-forwards"
onClick={() =>
setPostIndex(
postIndex === profile1.postImages.length - 1
? 0
: postIndex + 1
)
}
>
<FontAwesomeIcon icon={faAngleRight} />
</button>
<button
type="button"
className="post-image-backwards"
onClick={() =>
setPostIndex(
postIndex === 0
? profile1.postImages.length - 1
: postIndex - 1
)
}
>
<FontAwesomeIcon icon={faAngleLeft} />
</button>
</>
)}

{profile1.postImages.map((image: string, index: number) => (
<img
className={`${postIndex === index ? "active" : "inactive"}`}
src={image}
alt={data.username}
/>
))}   
</div>

<div className="post-image">
{profile2.postImages.length > 1 && (
<>
<div className="post-image-count">
{postIndex + 1}/{profile2.postImages.length}
</div>
<button
type="button"
className="post-image-forwards"
onClick={() =>
setPostIndex(
postIndex === profile2.postImages.length - 1
? 0
: postIndex + 1
)
}
>
<FontAwesomeIcon icon={faAngleRight} />
</button>
<button
type="button"
className="post-image-backwards"
onClick={() =>
setPostIndex(
postIndex === 0
? profile2.postImages.length - 1
: postIndex - 1
)
}
>
<FontAwesomeIcon icon={faAngleLeft} />
</button>
</>
)}

{profile2.postImages.map((image: string, index: number) => (
<img
className={`${postIndex === index ? "active" : "inactive"}`}
src={image}
alt={data.username}
/>
))}

</div>

我已经尝试实例化接口以及导入json数据，似乎没有任何工作。

<img
style={{ objectFit: "cover" }}
src={profile2.postImages[1]}
alt=""
/>

第一张图片总是正确地呈现每个帖子，但是当我点击carousel时，它显示了错误的图片和数据。

Answer 1

看起来你有两个相同的代码块，除了一个使用profile1，另一个使用profile2。这就是道具的作用!您需要为您的UI的特定部分定义组件，如ProfileCarousel，然后将数据作为props传入。

似乎现在的问题是，你有一个postIndex状态，你正在使用两个用户配置文件。我们需要为每个概要文件保持那个状态。

您将创建一个可重用组件ProfileCarousel，并为两个单独的配置文件创建两个单独的实例。

类似以下内容:

<div>
<ProfileCarousel user={profile1}/>
<ProfileCarousel user={profile2}/>
</div>

虽然更现实，你可能有一个更大的UserProfile组件在内部渲染ProfileCarousel。你可能有一个array的用户数据，你将使用.map来迭代。

const ProfileCarousel = ({ user }: { user: Profile }) => {
const [postIndex, setPostIndex] = useState(0);
const images = user.postImages;
const count = images.length;
return (
<div>
{count > 1 && (
<>
<div className="post-image-count">
{postIndex + 1}/{count}
</div>
<button
type="button"
className="post-image-forwards"
onClick={() =>
setPostIndex(
postIndex === count - 1
? 0
: postIndex + 1
)
}
>
<FontAwesomeIcon icon={faAngleRight} />
</button>
<button
type="button"
className="post-image-backwards"
onClick={() =>
setPostIndex(
postIndex === 0
? count - 1
: postIndex - 1
)
}
>
<FontAwesomeIcon icon={faAngleLeft} />
</button>
</>
)}
{images.map((image: string, index: number) => (
<img
className={`${postIndex === index ? "active" : "inactive"}`}
src={image}
alt={user.username}
/>
))}
</div>
);
}
const UserProfile = ({ user }: { user: Profile }) => {
return (
<div>
<div>
<h2>{user.username}</h2>
<div>{user.followers} Followers</div>
<div>{user.following} Following</div>
</div>
<ProfileCarousel user={user} />
</div>
);
}

const Feed = () => {
const data: Profile[] = [] /* from some API call? */
return (
<ul>
{data.map(user => (
<li key={user.username}>
<UserProfile user={user} />
</li>
))}
</ul>
);
}