React中如何从state匹配帖子作者并正确渲染用户名到页面

问题排查及修复方案 #

核心问题1：getPostAuthor函数缺少返回值，且方法使用错误 #

• Array.filter返回的是符合条件的数组，查找单个匹配对象应该用Array.find更合理
• 你当前的写法中，filter的返回值没有作为getPostAuthor的返回值抛出，渲染时拿到的是undefined，所以不会显示内容

核心问题2：map循环的key属性绑定位置错误 #

• 列表渲染的key需要绑定在map返回的最外层根元素（即Post组件）上，绑定到内层子元素不符合React规范，可能引发渲染异常

修正后的代码 #

import { useState, useEffect } from 'react'
// 请确保已正确引入getPosts、getUsers、getComments方法和Post、PostsSection等自定义组件

export default function Posts() {
  const [posts, setPosts] = useState([]);
  const [comments, setComments] = useState([]);
  const [users, setUsers] = useState([])

  useEffect(() => {
    // 用Promise.all并行请求提升加载速度
    Promise.all([getPosts(), getUsers(), getComments()])
      .then(([postsRes, usersRes, commentsRes]) => {
        setPosts(postsRes)
        setUsers(usersRes)
        setComments(commentsRes)
      })
  }, [])

  // 修正后的获取用户名方法，加兜底避免找不到用户时报错
  const getPostAuthor = (userid)=> {
    const user = users.find(item => item.id === userid)
    return user ? user.name : '匿名用户'
  }

  return (
    <PostsSection> 
      {
        posts.map(item => (
          <Post key={item.id}> {/* key绑定到最外层Post，用唯一id比title更稳妥 */}
            <PostTitle>{ item.title }</PostTitle>
            <PostBody>{item.body}</PostBody>
            <PostFooter>
              <p>comments:{comments.filter(c => c.postId === item.id).length}</p> {/* 内置动态评论数逻辑，可直接使用 */}
              <p>{getPostAuthor(item.userId)}</p>
            </PostFooter>
          </Post>
        ))
      }
    </PostsSection>
  )
}

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