javascript 如何data.map在Reactjs中使用www.example.com函数

tv6aics1 于 2023-01-29 发布在 Java

关注(0)|答案(2)|浏览(134)

我正在使用Reactjs和nextjs，现在我正在尝试使用“map”函数获取数据，我怎么能做到这一点？这里是我目前的代码

import { useEffect, useState } from "react"
export default function Test() {
  const [data, setData] = useState<any>();
  useEffect(() => {
    const callData = async () => {
      const data = await fetch('https://dummyjson.com/products').then(data => data.json())
      console.log(data);
      setData(data)
    }
    callData()
  }, [])

  return (
   //want to use map function here
    );

}

JavaScript

来源：https://stackoverflow.com/questions/75267580/how-to-use-data-map-function-in-reactjs

2条答案

按热度按时间

pkwftd7m1#

那么dummyjson将返回一个包含{ products，total，skip，limit }的对象，您可以这样写

{data.products.map((product) => <p key={product.id}>{product.title}</p>)}

map中的段落可以是您的ArticleItem或您想要的任何内容。

赞(0）回复(0）举报 2023-01-29

2ul0zpep2#

所以你可以这样做，检查状态中是否有任何数据，然后map到，如果没有显示一些其他的消息。不确定你的数据状态是如何结构化的，但是这应该会有所帮助

return(
<div>
{
 data.length ? data.map(({id: number, title: string}) => <p key={id}>{title}</p>) : do something if data is empty
}
</div>)

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 如何data.map在Reactjs中使用www.example.com函数

2条答案

相关问题

热门标签

最新问答