Por lo general, funciona, pero ahora mismo muestra un error.
componenteDidMount código
componentDidMount() { axios.get(`${process.env.REACT_APP_DEV_URL}/admins/playlist_admin`, { headers: { 'Authorization': this.state.token } }) .then((res) => { this.setState({ list: res.data.response }); }) }Código de procesamiento
<MynTable headData={headData} className="bg-blue text-white myn-table" > { list ? //i checked in console. list has some data list.map((playlist, index) => ( <tr key={index}> <td>{playlist.id}</td> <td>{playlist.name}</td> <td>{playlist.songs.length}</td> </tr> )) : null } </MynTable>Los datos provienen de las API y se guardaron en el estado. Aún así, la función de mapa muestra el error del mapa no es una función. si un cambio de la lista expresa? con lista.longitud > 0 ? luego se elimina el error pero nuevamente el renderizado no devolvió nada.
Está utilizando una matriz llamada list que existe en su objeto de store pero en el segmento JSX, no verificó la existencia correctamente.
if(list) { return list.map() } else { return null } // or with ternary operator: list ? list.map() : null Como ve arriba, la condición if verificará la propiedad de la list , que es una propiedad presente en el state (ya que la propiedad de la list existe antes de la llamada a la API). Por lo tanto, verificar la list con los métodos anteriores siempre devolverá true . para resolver el problema, en lugar de verificar la list antes de mapear, intente verificar la longitud de la misma.
{ list.length > 0 ? list.map() : null }Nota: puede usar un cortocircuito para la declaración anterior ya que un lado es nulo:
{ list.length > 0 && list.map() }Solucioné este problema con un indicador de carga.
componentDidMount() va a llamar después de renderizar, es por eso que está recibiendo este error.
Debe hacer que un estado de carga se establezca en verdadero con una condición en el renderizado si la carga es falsa y va a los datos del mapa.
Establezca la carga en false en componentDidMount() después de obtener datos para asegurarse de que el estado se llene con datos después de mapearlo.