无法渲染并映射POST请求返回的Promise数组问题求助

你猜的没错，报错核心原因就是getAllLikes()返回的是Promise对象，不是你预期的点赞用户数组。Promise本身没有map方法，所以直接调用.map()会抛出map is not a function的错误。

在React组件中处理异步数据，需要结合useState（存储数据）和useEffect（触发异步请求）来实现，具体代码如下：

import { useState, useEffect } from 'react';

const QuoteCard = () => {
  // 存储点赞用户数组
  const [likedUsers, setLikedUsers] = useState([]);
  // 加载状态，避免初始空白
  const [isLoading, setIsLoading] = useState(true);
  // 错误状态，捕获请求异常
  const [error, setError] = useState(null);

  // 封装POST请求，增加错误处理
  const Post = async (url, body) => {
    try {
      const res = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "accept": "*/*"
        },
        body: JSON.stringify(body)
      });
      if (!res.ok) throw new Error('请求失败');
      return await res.json();
    } catch (err) {
      throw err;
    }
  };

  const getAllLikes = async () => {
    return await Post('api/getQuote', {
      id: "639e3aff914d4c4f65418a1b"
    });
  };

  // 组件挂载时触发异步请求
  useEffect(() => {
    const fetchLikes = async () => {
      try {
        const users = await getAllLikes();
        setLikedUsers(users);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchLikes();
  }, []);

  // 加载中/错误状态渲染
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error}</div>;

  // 正常渲染点赞用户
  return (
    <div>
      {likedUsers.map((user, index) => (
        <p key={index}>{user}</p>
      ))}
    </div>
  );
};

export default QuoteCard;

• 不要直接在JSX中调用异步函数：每次组件渲染都会重新执行请求，可能导致无限循环和性能问题。
• 给map元素添加key：React需要唯一标识来优化渲染，避免警告。
• 增加错误和加载状态提升用户体验：避免请求未完成时页面空白，或请求失败时无提示。

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