Javascript 如何使用setState呈现使用map从API调用返回的单个数据

如何使用setState呈现API调用返回的单个数据。正如问题所暗示的那样。。。我得到的是另一个数据数组

代码如下：

const [likes, setLikes] = useState(0);

  useEffect( async () => {

    const query = await getDevsApi();    //This returns a collection of data I can map.
    const likes = query.map(like => like.upvotes);    //The problem  here is, it returns an array of data... How do I get individual data for each user? and set it at as the current state in the setLikes() below.

    setLikes(likes)

  },[]);

我仍在绞尽脑汁。有人能为我解释一下最好的方法吗

更新代码 版本。一,

弗尔。二,

const [likes, setLikes] = useState(0);
  
  useEffect(() => {
    ( async () => {
        const query = await getDevsApi();
        const likes = query.map(like => like.upvotes);
     setLikes(likes);
      })
      (); 
    },[]);

然而，它们都产生相同的结果

其想法是从API中获取喜欢的数量，并在本节中显示它们

<span className={styles.iconLeft}>
<a href="#" onClick={addLike} ><small>{likes} Likes  <FontAwesomeIcon className={styles.columnIcon} icon={faHeart} /></small> </a>
</span>

{likes}是魔法发生的地方。初始状态设置为0。。。useEffect将用于显示从API获取的真实数据。是的，我得到了数据，但它并没有像预期的那样分发给每个用户，而是给了我一个数组并将其附加到所有用户。 请参见上面的屏幕截图。 不过我希望我能清楚地沟通

我刚刚把我的项目推给了vercel。 这是我现在拥有的一个分支

这是我想要它的另一个分支

是的，这是我第一次尝试使用Jamstack。。。使用现在流行的headless CMS（strapi）

方法

map（）

创建一个新数组，其中填充了对调用数组中的每个元素调用提供函数的结果。见：

但这不是问题。如果要呈现数组中的单个数据，应使用呈现UI的功能组件的

return

块中的

map（）

方法

const [likes, setLikes] = useState([]);

  useEffect( async () => {

    const query = await getDevsApi(); 
    const likes = query.map(like => like.upvotes); 

    setLikes(likes)

  },[]);
return (
...
  <span className={styles.iconLeft}>
    { likes?.map(like => <a href="#" onClick={addLike} ><small>{like} Likes  
      <FontAwesomeIcon className={styles.columnIcon} icon={faHeart} /></small> </a> 
    }
  </span>
)

const[likes，setLikes]=useState（[]）；
useffect（异步（）=>{
const query=wait getDevsApi（）；
const likes=query.map（like=>like.upvows）；
喜欢（喜欢）
},[]);
返回(
...
{likes？.map（like=>
}
)

您永远不应该将

异步函数传递给
useffect
在此处阅读更多信息：您可以用当前响应的样子更新您的问题吗？您希望它是什么样子？
const likes=query.map（like=>（{name:like.userName，likes:like.upvows}））
有趣的是，你在回答中也得到了用户信息。@vajad57感谢你指出了在useEffect中使用async的问题，这是控制台和屏幕上的情况。实际上，我需要数组中的所有元素分别映射到卡。通过显示更多代码。你需要重写你的useE因为它不应该执行异步工作，而您应该以表单的形式显示函数的其余部分，这样人们就可以看到您正在使用的代码，并了解您对React的熟练程度，从而提供适当的建议/帮助。
const [likes, setLikes] = useState([]);

  useEffect( async () => {

    const query = await getDevsApi(); 
    const likes = query.map(like => like.upvotes); 

    setLikes(likes)

  },[]);
return (
...
  <span className={styles.iconLeft}>
    { likes?.map(like => <a href="#" onClick={addLike} ><small>{like} Likes  
      <FontAwesomeIcon className={styles.columnIcon} icon={faHeart} /></small> </a> 
    }
  </span>
)