React中如何渲染用户关联的嵌套posts对象数据？

从你的描述和代码来看，问题出在关联的posts是数组而非单个对象——一个用户通常对应多篇帖子，所以不能直接用post.posts.PostTitle访问，得遍历posts数组才行。

直接修改你的渲染代码即可实现：

render() {
    console.log(this.state.postData);
    if (this.state.postData.length === 0) {
        return <div>Profile data not found</div>
    }

    const dashPost = this.state.postData.map(post => (
        <div key={post.UserId}>
            <h1>{post.FirstName}</h1>
            {/* 遍历当前用户的posts数组 */}
            {post.posts && post.posts.length > 0 ? (
                <div className="user-posts">
                    {post.posts.map((singlePost) => (
                        <div key={singlePost.PostId} className="post-item">
                            <h3>{singlePost.PostTitle}</h3>
                            {/* 这里可以继续渲染帖子的其他内容，比如PostContent等 */}
                        </div>
                    ))}
                </div>
            ) : (
                <p>No posts found for this user</p>
            )}
        </div>
    ));

    // Jquery animations can go here

    return <div>{dashPost}</div>
}

关键说明： #

• 用post.posts.map遍历用户的每一篇帖子，因为post.posts是数组（对应控制台里的posts表数据集合）
• 加post.posts && post.posts.length > 0的判断，避免posts未加载或为空时出现报错
• 给每个帖子项加独立的key（比如singlePost.PostId），符合React列表渲染的要求

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