首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >只有第一个数组元素在react js中呈现。

只有第一个数组元素在react js中呈现。
EN

Stack Overflow用户
提问于 2021-12-22 03:58:13
回答 1查看 639关注 0票数 -1

我有一个数组,但是只有第一个数组元素是rendering.How。这是Firebase的响应。在控制台中,它很好,但是在jsx中,只有第一个元素正在呈现。这是我的密码

代码语言:javascript
复制
let users=[
           {
            email: "rabina@gmail.com",
            id: "jqGZhhXDa8xI4iMtYO0U",
            joined_at: Fri Dec 03 2021 03:44:44 GMT+0545 (Nepal Time),
             name: "Rabina chandak",
            profile: "https://picsum.photos/200/300/?blur=2"
        },
         {
        id: 'LVEy69S3VIZXdztSKTyG',
         name: 'Jeevan',
         email: 'jeevan@gmail.com',
         joined_at: Fri Nov 12 2021 11:33:33 GMT+0545 (Nepal Time), 
        profile: 'https://picsum.photos/200/300/?blur=5'
        }
        ]



  users.map((user)=>{
    console.log(user.id)
    })



 const User=()=>{
   return(        
     div className="flex">
    <div className="bg-gray-100  w-full p-4 justify-between">
    <div className="lg:mx-16 mx-8">
    <div className="grid lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-1 gap-4">
    {

        {users.forEach((user)=>{
            return <UserCard key={user.id} name={user.name} email={user.email} id={user.id} profile={user.profile} session={session}/>
        })}
    }
    </div>
    </div>
    </div>
    </div>
     )
    }
EN

回答 1

Stack Overflow用户

发布于 2021-12-22 04:05:55

试试下面的代码:

代码语言:javascript
复制
               <div>
                {users.map((user) => (
                  <h2>{user.name}</h2>
                ))}
              </div>

而不是这样,它将完美地工作:

代码语言:javascript
复制
 const User = () => {
    return users.map(user => {
        return (
            <p>
                {user.id}
            </p>
        );
    });
};
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70444056

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档