next.js 当从服务器调用API时，我能够看到响应，但当使用data.map()迭代数据时，数据不会显示在下一个js的前端

ctrmrzij 于 2023-08-04 发布在其他

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

当从服务器调用API时，我能够看到响应，但当使用data.map()迭代时，数据不会反映在下一个js的前端中
首先，我从服务器端调用API，我能够看到响应。但是当我尝试使用map函数迭代数据时，我无法看到数据，并且没有错误。
这是我的代码。

async function productlist(){
  
  let data = await fetch(`https://dummyjson.com/users`);
   data = await data.json();
  return data;
}

export default async function Home() {

  let data = await productlist();
  console.log("dataArr",data);
  console.log("dataArr",data[0].urls.small);
 
  return (
    
       <div>
      {/*<!-- Featured section -->*/}
<section className="py-20">
    <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-gray-800 mb-8">Free Stock Photos</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">

            {
              data.map((product)=>{
                <div className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 hover:opacity-80 transition duration-500 ease-in-out">
                <img src={product.firstName} alt="Coffee"
                    className="w-full h-full object-cover"/>        
                <h2>{product.firstName}</h2>      
                
            </div>

            })}
       </div>
    </div>
</section>
</div>
    
  )
}

字符串

next.js

来源：https://stackoverflow.com/questions/76716376/when-calling-the-api-from-server-i-am-able-to-see-the-response-but-when-using-da

2条答案

按热度按时间

btqmn9zl1#

import {useState,useEffect} from 'react'

   
   export default function App() {
     const [state,setState] = useState([])
     const productlist=async()=>{
     
       let data = await fetch(`https://dummyjson.com/users`);
        data = await data.json()   
        setState(data.users)
      
     }
     useEffect(()=>{
   
       productlist()
     },[])
     console.log(state);
    
     
     
     return (
       <div className="App">
         <h1>Hello CodeSandbox</h1>
         <h2>Start editing to see some magic happen!</h2>
         {state.map((item)=>{
             return(
               <>
               <h1>{item.id}</h1>
               <h1>{item.firstName}</h1>
                {/* <img src={item.image}/> */}
               
               </>
             )
           })
         }
       </div>
     );
   }

字符串

赞(0）回复(0）举报 2023-08-04

brtdzjyr2#

你的.map函数没有返回任何东西。
你可以使用显式返回：

data.map((product, index) => {
  return (
    <div
      key={index}
      className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 hover:opacity-80 transition duration-500 ease-in-out"
    >
      <img src={product.firstName} alt="Coffee" className="w-full h-full object-cover" />
      <h2>{product.firstName}</h2>
    </div>
  );
});

字符串
或隐式返回：

data.map((product, index) => (
  <div
    key={index}
    className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 hover:opacity-80 transition duration-500 ease-in-out"
  >
    <img src={product.firstName} alt="Coffee" className="w-full h-full object-cover" />
    <h2>{product.firstName}</h2>
  </div>
));

型
看这里

**注意：**在JSX中使用Array.prototype.map()时，必须为返回数组的每个元素指定唯一的key。

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 当从服务器调用API时，我能够看到响应，但当使用data.map()迭代数据时，数据不会显示在下一个js的前端

2条答案

相关问题

热门标签

最新问答