React中useEffect请求数据存useState后渲染时undefined如何解决

• useState未设置初始值：你初始化allComments时没有传默认值，初始状态为undefined，首次渲染时调用map方法会直接报错
• 状态更新逻辑与语法错误：首先你在对象字面量中直接写response.data没有指定键名，属于无效语法，会导致状态更新失败；其次你不需要将返回结果包裹为对象、也不需要展开旧状态，你的业务场景是直接存储接口返回的评论数组，而非在旧对象基础上合并字段
• 日志打印时机错误：fetchData是异步函数，你在调用fetchData后立刻打印allComments时，接口请求还未完成、状态也未触发更新，自然只能拿到初始的undefined；另外React状态更新是异步的，更新后无法在当前作用域立刻拿到最新值
• useEffect依赖缺失：你当前把依赖数组设为空，后续如果postId发生变化，不会重新请求对应文章的评论

直接用useState存储评论数组即可，不需要用prevState写法（除非你是做分页加载需要累加旧评论），修复后代码如下：

const Comments = ({ postId }) => {
  // 初始化状态为空数组，避免首次渲染map报错
  const [allComments, setAllComments] = useState([])
  // 可选：添加加载状态、错误状态优化体验
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    async function fetchData() {
      setLoading(true)
      setError('')
      try {
        const data = { postId };
        const response = await POST(ENDPOINTS.GET_ALL_COMMENTS, data);
        // 直接将接口返回的评论数组存入状态即可
        setAllComments(response.data || [])
      } catch (err) {
        setError('评论加载失败')
        console.error(err)
      } finally {
        setLoading(false)
      }
    }
    fetchData();
  // 依赖数组加入postId，postId变化时重新拉取评论
  }, [postId]);

  // 状态更新后组件会重新渲染，此处打印可拿到最新的allComments
  // console.log(allComments)

  // 渲染时添加状态判断，避免异常
  if (loading) return <div>加载中...</div>
  if (error) return <div>{error}</div>

  return (
    <div>
      {allComments.map(comment => (
        // 你的评论项渲染逻辑，记得加唯一key
        <div key={comment.id}>{comment.content}</div>
      ))}
      {allComments.length === 0 && <div>暂无评论</div>}
    </div>
  );
};

如果你确实需要在旧评论基础上累加新数据（比如分页滚动加载），才需要用到prevState写法，示例如下：

// 加载下一页时的状态更新逻辑
setAllComments(prev => [...prev, ...newResponse.data])

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