在react中渲染array.map（）中的对象对象数据数组答案

【问题标题】：Rendering array of object object data in array.map() in react在react中渲染array.map（）中的对象对象数据数组
【发布时间】：2022-01-06 04:25:27
【问题描述】：

我在尝试呈现数据时遇到问题。数据以对象内部的数组形式出现（对象是用户 objectId），然后再次出现在另一个对象内部（我想使用 map 函数呈现的数据）。我试过了，但我没有得到解决方案。consol data image link

const Adminsidebar = () => {

const adminList = useSelector((state) => state.adminList); //const { notes } = adminList;

const 结果 = Object.values(adminList); 控制台日志（结果）；

返回 (

      </thead>

      <tbody>
        {result.map((repos) => (

          <tr className="alert" >
            <td className="product-item-name">{repos.name}</td>
            <td className="product-item-email">{repos.email}</td>
            <td className="product-item-phone">{repos.contact}</td>
            <td className="product-item-code">{repos.clubregistrationnumber}</td>

          </tr>

        ))}
      </tbody>


    </table>
  <Footer />
</>

)}

导出默认管理边栏；

【问题讨论】：

您应该在数组中包含元素的键，以使元素具有稳定的身份。在您的情况下，它应该类似于 <tr className="alert" key={repos.id}>
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： reactjs

【解决方案1】：

const Adminsidebar = () => {

    const adminList = useSelector((state) => state.adminList);
    //const { notes } = adminList;

    const result = Object.values(adminList);
    console.log(result);

    return (
        <React.Fragment>
            <table>
                <thead>

                </thead>
                <tbody>
                    {result.map((repos,index) => {

                        return (
                            <React.Fragment key={index}>
                                {
                                    repos.map((items,itemsIndex)=>{

                                        if (typeof items !== 'object')
                                            return <React.Fragment key={`${index}-${itemsIndex}`}/>

                                        const itemsResult = Object.values(items);

                                        return (
                                            <React.Fragment key={itemsIndex}>
                                                {
                                                    itemsResult.map((item)=>(
                                                        <tr key={item._id} className="alert">
                                                            <td className="product-item-name">{item.name}</td>
                                                            <td className="product-item-email">{item.email}</td>
                                                            <td className="product-item-phone">{item.contact}</td>
                                                            <td className="product-item-code">
                                                                {item.clubregistrationnumber}
                                                            </td>
                                                        </tr>
                                                    ))
                                                }
                                            </React.Fragment>
                                        )
                                    })
                                }
                            </React.Fragment>
                        )
                    })}
                </tbody>
            </table>
        </React.Fragment>
    )
}

export default Adminsidebar

【讨论】：

非常感谢您的帮助。成功了