如何在 React Js 中迭代数组对象？

Question

我正在尝试使用函数 .map 在表上渲染来自 API 的数据，我以前做过，但我只是不知道为什么这次它不起作用，我尝试了不同的方法，但它仍然是没有被渲染。

这是我的代码：

 import React, { useContext } from 'react'
 import { useEffect } from 'react';
 import Table from 'react-bootstrap/Table';
 import { CdrsContext } from '../contexts/CDRDownloadingContext';
 import { UserContext } from '../contexts/UserContext';
 import UseAuth from '../hooks/UseAuth';
 import styles from './stylePages/CDRDownloading.module.css'

const CDRTable = () => {

const { cdrListFiltered, getCdrsListMadeByUser } = useContext(CdrsContext);
const { getUserDetails, record } = useContext(UserContext)

/*************************************
* GETTING DETAILS FROM USER
//*************************************/
const { auth } = UseAuth();
// auth personalized hook is called to get the username's user 
// which will be the parameter to get the complete user details
const extractedUsername = auth.username;

// variable to store the user's logged in specific ID. 
const extractedUserById = record.serie;
console.log(extractedUserById)
//**************************************/

// Function to mount the list the specific logged in user's information and get the 
//reportes they have made by passing the Id of the user. 
useEffect(() => {
    getUserDetails(extractedUsername);
    getCdrsListMadeByUser(extractedUserById)
}, []);

console.log(cdrListFiltered);
// console.log(cdrListFiltered[0])
return (
    <>
        <div>
            <br />
        </div>
        <Table className={styles.table}>
            <thead className={styles.tableHead}>
                <tr>
                    <th>ID</th>
                    <th>FECHA CONSULTA</th>
                    <th>ID USUARIO</th>
                    <th>EMAIL</th>
                    <th>FECHA INICIAL</th>
                    <th>FECHA FINAL</th>
                    <th>TIPO REPORTE</th>
                    <th>NOMBRE CLIENTE/PROVEEDOR</th>
                    <th>RGIDs</th>
                    <th>ESTADO</th>
                    <th>PROCESO INICIADO</th>
                    <th>PROCESO FINALIZADO</th>
                    <th>FILTRO LLAMADA</th>
                </tr>
            </thead>
            <tbody>
                {cdrListFiltered?.data?.map((report) => (
                    <tr key={report.map.id} >
                        <td>{report.map.requestDate}</td>
                        <td>{report.data.map.requestDate}</td>
                        <td>{cdrListFiltered[report.map.requestDate]}</td>
                    </tr>
                ))}
            </tbody>
        </Table>
    </>
)
}

export default CDRTable

我在控制台上显示数据信息以查看如何对其进行迭代，但我仍然无法弄清楚我失败的地方。我在控制台上附上了输出的屏幕截图。

Console's output data

我会很感激你们的帮助！谢谢你。

Answer 1

你应该返回它然后它会工作尝试下面的代码让我知道它是否有效

{cdrListFiltered?.data?.map((report, reportIndex) => { 返回 （ {report.map.requestDate} {report.data.map.requestDate} {cdrListFiltered[report.map.requestDate]} })}