Estoy tratando de obtener datos de API y luego mostrarlos en formato de tabla. Aunque puedo obtener datos y almacenarlos usando la función useState, pero no se muestra en la interfaz de usuario. Y la función useState no funciona en el primer renderizado. Cuando la transcripción del primer procesamiento está vacía, pero después del segundo procesamiento, tiene datos pero no se muestran en la interfaz de usuario. Estoy confundido sobre qué hacer. He hecho lo mismo en mis páginas anteriores y no tengo ningún problema.

 import React, { useEffect, useState } from 'react' import _ from 'lodash' import { CTable, CTableBody, CTableDataCell, CTableHead, CTableHeaderCell, CTableRow, } from '@coreui/react' import axios from 'axios' import { useParams } from 'react-router-dom' export default function viewMeeting() { const { id } = useParams() const [transcription, setTranscripton] = useState([]) useEffect(() => { loadUsers() }, []) const loadUsers = async() => { const result = await axios.get(`http://13.212.153.21:3000/meeting?meeting_id=${id}`) console.log(result.data.transcriptions) // const data = result.data.transcriptions setTranscripton((result.data.transcriptions).slice(0,10)) } console.log(transcription) console.log(transcription[0]) return ( <div className="container"> <div className='vh-100 w-50 bg-white'> <div className='text-center'> <p>Matrices</p> </div> <p>Emotional Score</p> </div> <div className='vh-100 w-75'> <CTable> <CTableHead color='light'> <CTableRow> <CTableHeaderCell>Speech</CTableHeaderCell> <CTableHeaderCell className="text-end">Emotions</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> {transcription.map((user, index) => { <CTableRow v-for="item in tableItems" key={index}> <CTableDataCell>{user.text}</CTableDataCell> <CTableDataCell>{user.response}</CTableDataCell> </CTableRow> })} </CTableBody> </CTable> </div> </div> ) }