0
I am making requests to an API through 'Aces', but the following error is happening:
My code:
import React, {Component} from 'react'
import {GridItem, Tabs, Tab, TabList, TabPanels, TabPanel, Image} from '@chakra-ui/react'
import axios from 'axios'
const baseurl = 'http://localhost:3000/'
let initialState = {
bg: [],
film: [],
synopsis:[],
allFilmsPageOne: []
}
export default class ThirdRow extends Component {
constructor(props) {
super(props)
this.getFilms = this.getFilms.bind(this)
this.state = {...initialState}
}
componentDidMount() {
this.getFilms()
}
getFilms() {
const arrayFilms = []
axios.get(`${baseurl + 'filmes'}`).then(response => {
for(let i=0; i < response.data.results.length; i++){
arrayFilms.push(response.data.results[i])
}
})
this.setState({allFilmsPageOne : arrayFilms})
}
render() {
return (
<React.Fragment>
{console.log(this.state.allFilmsPageOne[0])}
<GridItem bgColor='white'/>
<GridItem bgColor='white'>
<Tabs isFitted variant="enclosed" pt='6'>
<TabList mb="1em">
<Tab>Filmes</Tab>
<Tab>Séries</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Image src={`/`} alt="film"/>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
</TabPanels>
</Tabs>
</GridItem>
<GridItem bgColor='white'/>
</React.Fragment>
)
}
}
The intention of 'console.log' after '<React.Fragment>' was to know if it would be able to use the state properties... But after the state is updated by the function getFilms, I can’t read past properties...
Example:
When I put {console.log(this.state.allFilmsPageOne)}
The console returns me right as in the image below:
But when I put {console.log(this.state.allFilmsPageOne[0])} with the intention of accessing the first element of the array, it returns me Undefined, the same happens for all the items of the array, to which I need to access!
What am I doing wrong?
Edit below:
After doing as novic companion spoke:
import React, {Component} from 'react'
import {GridItem, Tabs, Tab, TabList, TabPanels, TabPanel, Image} from '@chakra-ui/react'
import axios from 'axios'
const baseurl = 'http://localhost:3000/'
let initialState = {
bg: [],
film: [],
synopsis:[],
allFilmsPageOne: []
}
export default class ThirdRow extends Component {
constructor(props) {
super(props)
this.getFilms = this.getFilms.bind(this)
this.state = {...initialState}
}
getFilms() {
axios.get(`${baseurl + 'filmes'}`).then(response => {
this.setState({allFilmsPageOne : response.data})
});
}
componentDidMount() {
this.getFilms()
}
render() {
const { data } = this.state
return (
<React.Fragment>
{console.log(data.length)}
<GridItem bgColor='white'/>
<GridItem bgColor='white'>
<Tabs isFitted variant="enclosed" pt='6'>
<TabList mb="1em">
<Tab>Filmes</Tab>
<Tab>Séries</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Image src={`/`} alt="film"/>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
</TabPanels>
</Tabs>
</GridItem>
<GridItem bgColor='white'/>
</React.Fragment>
)
}
}
I got 'Undefined' again!
If you help, this is the JSON I’m requesting...
{
"page": 1,
"results": [
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/pcDc2WJAYGJTTvRSEIpRZwM3Ola.jpg",
"genre_ids": [
28,
12,
14,
878
],
"id": 791373,
"original_language": "en",
"original_title": "Zack Snyder's Justice League",
"overview": "Determinado a garantir que o sacrifício final do Superman não foi em vão, Bruce Wayne alinha forças com Diana Prince com planos de recrutar uma equipe de metahumanos para proteger o mundo de uma ameaça de proporções catastróficas que se aproxima.",
"popularity": 11783.352,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/v9XwEXYWpxt2rpkmFBiQ1zeyKUy.jpg",
"release_date": "2021-03-18",
"title": "Liga da Justiça de Zack Snyder",
"video": false,
"vote_average": 8.7,
"vote_count": 3389
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/hJuDvwzS0SPlsE6MNFOpznQltDZ.jpg",
"genre_ids": [
16,
12,
14,
10751,
28
],
"id": 527774,
"original_language": "en",
"original_title": "Raya and the Last Dragon",
"overview": "O reino encantado Kumandra é dividido em cinco regiões e sua população venerava os dragões mágicos que eram presentes no reino, porém quando uma força maligna ameaçou a Terra, os dragões se sacrificaram para salvar a humanidade. Agora, 500 anos depois, o mesmo mal voltou e cabe a uma guerreira solitária, Raya, rastrear o lendário último dragão para restaurar a terra fraturada e seu povo dividido.",
"popularity": 3067.315,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/yXrb84zJidCefyhTWHwo4yCDvwz.jpg",
"release_date": "2021-03-03",
"title": "Raya e o Último Dragão",
"video": false,
"vote_average": 8.4,
"vote_count": 1613
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/drulhSX7P5TQlEMQZ3JoXKSDEfz.jpg",
"genre_ids": [
18,
14,
878
],
"id": 581389,
"original_language": "ko",
"original_title": "승리호",
"overview": "Perseguindo detritos espaciais e sonhos distantes no ano de 2092, quatro desajustados descobrem segredos explosivos durante a tentativa de comércio de um humanoide.",
"popularity": 3507.528,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/hJgEf18Sw8iwtQCzCSIQqGOLaq6.jpg",
"release_date": "2021-02-05",
"title": "Nova Ordem Espacial",
"video": false,
"vote_average": 7.2,
"vote_count": 416
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/gzJnMEMkHowkUndn9gCr8ghQPzN.jpg",
"genre_ids": [
53,
28,
18
],
"id": 793723,
"original_language": "fr",
"original_title": "Sentinelle",
"overview": "Transferida para casa depois de uma missão traumatizante, uma soldado francesa usa suas habilidades letais para caçar o homem que feriu sua irmã.",
"popularity": 2266.597,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/56Z9eh4k9pzR6Yhy201nq2Qoa0n.jpg",
"release_date": "2021-03-05",
"title": "A Sentinela",
"video": false,
"vote_average": 6,
"vote_count": 264
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/fev8UFNFFYsD5q7AcYS8LyTzqwl.jpg",
"genre_ids": [
28,
35,
10751,
16
],
"id": 587807,
"original_language": "en",
"original_title": "Tom & Jerry",
"overview": "Um gato de rua chamado Tom é contratado por uma garota chamada Kayla, uma jovem empregada que trabalha em um hotel glamouroso em Nova York, para se livrar de Jerry, um rato travesso que se mudou para o hotel, antes que ele seja a ruína de um importante casamento.",
"popularity": 1944.478,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/6KErczPBROQty7QoIsaa6wJYXZi.jpg",
"release_date": "2021-02-11",
"title": "Tom & Jerry - O Filme",
"video": false,
"vote_average": 7.4,
"vote_count": 958
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/8tNX8s3j1O0eqilOQkuroRLyOZA.jpg",
"genre_ids": [
14,
28,
12
],
"id": 458576,
"original_language": "en",
"original_title": "Monster Hunter",
"overview": "Baseado no jogo da Capcom chamado Monster Hunter, a tenente Artemis e seus soldados são transportados para um novo mundo. Lá, eles se envolvem em batalhas imponentes, buscando desesperadamente a sobrevivência contra bestas gigantes portadoras de habilidades surreais.",
"popularity": 1900.233,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/2QhhILPAv7MKFd1q57ssQeEV2su.jpg",
"release_date": "2020-12-03",
"title": "Monster Hunter",
"video": false,
"vote_average": 7.2,
"vote_count": 1225
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/iopYFB1b6Bh7FWZh3onQhph1sih.jpg",
"genre_ids": [
28,
878
],
"id": 399566,
"original_language": "en",
"original_title": "Godzilla vs. Kong",
"overview": "Em uma época em que os monstros andam na Terra, a luta da humanidade por seu futuro coloca Godzilla e Kong em rota de colisão que verá as duas forças mais poderosas da natureza no planeta se confrontarem em uma batalha espetacular para as idades. Enquanto Monarch embarca em uma missão perigosa em terreno desconhecido e descobre pistas sobre as origens dos Titãs, uma conspiração humana ameaça tirar as criaturas, boas e más, da face da terra para sempre.",
"popularity": 2675.469,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/klAIFewuqcyEmH1SMtR2XbMyqzM.jpg",
"release_date": "2021-03-24",
"title": "Godzilla vs. Kong",
"video": false,
"vote_average": 7.6,
"vote_count": 31
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/egg7KFi18TSQc1s24RMmR9i2zO6.jpg",
"genre_ids": [
14,
28,
12
],
"id": 464052,
"original_language": "en",
"original_title": "Wonder Woman 1984",
"overview": "Em 1984, Diana Prince entra em conflito com dois inimigos formidáveis, Maxwell Lord e a Mulher-Leopardo, enquanto reencontra misteriosamente com seu antigo interesse amoroso Steve Trevor.",
"popularity": 1693.774,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/AweDlIiohqw4sjC7gCsPVd1zo77.jpg",
"release_date": "2020-12-16",
"title": "Mulher-Maravilha 1984",
"video": false,
"vote_average": 6.8,
"vote_count": 4442
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/6TPZSJ06OEXeelx1U1VIAt0j9Ry.jpg",
"genre_ids": [
28,
80,
53
],
"id": 587996,
"original_language": "es",
"original_title": "Bajocero",
"overview": "Um ônibus penitenciário é atacado e o policial encarregado tem que enfrentar criminosos dentro e fora do veículo, além de um inimigo silencioso: o frio congelante.",
"popularity": 1644.589,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/rofFkTuMwwIJpWJVQaTRYqfQuoN.jpg",
"release_date": "2021-01-29",
"title": "Abaixo de Zero",
"video": false,
"vote_average": 6.4,
"vote_count": 468
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/uQtqiAu2bBlokqjlURVLEha6zoi.jpg",
"genre_ids": [
80,
18
],
"id": 544401,
"original_language": "en",
"original_title": "Cherry",
"overview": "Cherry deixa a faculdade para se tornar médico no Iraque, apoiado por sua amada, Emily. Ao voltar da guerra com estresse pós-traumático, se envolve com crime e drogas enquanto luta para reconquistar seu lugar no mundo.",
"popularity": 1629.653,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/qbSsR0IfnxdXZqfRMpH2PgLAbPV.jpg",
"release_date": "2021-02-26",
"title": "Cherry: Inocência Perdida",
"video": false,
"vote_average": 7.8,
"vote_count": 341
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/lOSdUkGQmbAl5JQ3QoHqBZUbZhC.jpg",
"genre_ids": [
53,
28,
878
],
"id": 775996,
"original_language": "en",
"original_title": "Outside the Wire",
"overview": "Em um futuro próximo, um piloto de drone e um androide ultrassecreto trabalham lado a lado no campo de batalha para evitar um ataque nuclear.",
"popularity": 1096.334,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/vnVQx7MJMwTvqcn5pkYDImxzlMg.jpg",
"release_date": "2021-01-15",
"title": "Zona de Combate",
"video": false,
"vote_average": 6.5,
"vote_count": 893
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/vKzbIoHhk1z9DWYi8kyFe9Gg0HF.jpg",
"genre_ids": [
35
],
"id": 484718,
"original_language": "en",
"original_title": "Coming 2 America",
"overview": "Situado no luxuoso país da realeza Zamunda, o recém coroado Rei Akeem e seu confidente Semmi embarcam em uma nova aventura que os levará ao redor do mundo: de sua grande nação Africana ao Queens, bairro de Nova York – onde tudo começou!",
"popularity": 878.181,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/mpXRG5zPUT18IeYvCoC4zOscked.jpg",
"release_date": "2021-03-05",
"title": "Um Príncipe em Nova York 2",
"video": false,
"vote_average": 6.9,
"vote_count": 1007
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/7KL4yJ4JsbtS1BNRilUApLvMnc5.jpg",
"genre_ids": [
18,
53
],
"id": 649087,
"original_language": "sv",
"original_title": "Red Dot",
"overview": "Com o relacionamento em crise e um bebê a caminho, um casal decide passar uns dias nas montanhas para reacender a paixão, mas acaba na mira de assassinos impiedosos.",
"popularity": 936.356,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/qth9hOnQctaJbyzmAau4DZaUyUG.jpg",
"release_date": "2021-02-11",
"title": "Ponto Vermelho",
"video": false,
"vote_average": 6.2,
"vote_count": 365
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/nz8xWrTKZzA5A7FgxaM4kfAoO1W.jpg",
"genre_ids": [
878,
28
],
"id": 651571,
"original_language": "en",
"original_title": "Breach",
"overview": "Um jovem clandestino está a bordo de uma arca interestelar para a Nova Terra. Com a ajuda de um experiente companheiro de tripulação, ele deve superar um terror cósmico malévolo com a intenção de usar a nave espacial como arma.",
"popularity": 917.923,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/nv4QdbPFKg98gbaG0nj4Mhjcks.jpg",
"release_date": "2020-12-17",
"title": "Ameaça no Espaço",
"video": false,
"vote_average": 4.5,
"vote_count": 323
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/vfuzELmhBjBTswXj2Vqxnu5ge4g.jpg",
"genre_ids": [
53,
80
],
"id": 602269,
"original_language": "en",
"original_title": "The Little Things",
"overview": "Um policial começa a ter problemas em sua investigação devido a seu passado obscuro e sua tendência por quebrar as regras.",
"popularity": 885.01,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/98UFAKFPUOIzF91Q0j0W7vR4ikV.jpg",
"release_date": "2021-01-28",
"title": "Os Pequenos Vestígios",
"video": false,
"vote_average": 6.4,
"vote_count": 630
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/jeAQdDX9nguP6YOX6QSWKDPkbBo.jpg",
"genre_ids": [
14,
28,
878
],
"id": 590706,
"original_language": "en",
"original_title": "Jiu Jitsu",
"overview": "Uma antiga ordem de experientes lutadores de Jiu Jitsu enfrenta temíveis invasores alienígenas em uma batalha pela Terra a cada seis anos.",
"popularity": 853.208,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/eLT8Cu357VOwBVTitkmlDEg32Fs.jpg",
"release_date": "2020-11-20",
"title": "Jiu Jitsu",
"video": false,
"vote_average": 5.2,
"vote_count": 340
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/fRrpOILyXuWaWLmqF7kXeMVwITQ.jpg",
"genre_ids": [
27,
53,
12,
9648
],
"id": 522444,
"original_language": "en",
"original_title": "Black Water: Abyss",
"overview": "Um casal apaixonado por aventura convence seus amigos a explorar um remoto sistema de cavernas nas florestas australianas. Com uma tempestade se aproximando, eles adentram na caverna, que começa a encher, os deixando presos com um grupo de crocodilos.",
"popularity": 858.945,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/9I2ATBaOfwXo23vSBfEAQ3uZhGV.jpg",
"release_date": "2020-07-09",
"title": "Crocodilos: A Morte Te Espera",
"video": false,
"vote_average": 5,
"vote_count": 170
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/yR27bZPIkNhpGEIP3jKV2EifTgo.jpg",
"genre_ids": [
16,
10751
],
"id": 755812,
"original_language": "fr",
"original_title": "Miraculous World: New York, United HeroeZ",
"overview": "A turma de Marinette (Cristina Valenzuela) embarca numa viagem para Nova York com o intuito de comemorar a semana franco-americana da amizade. Ladybug então deixa Paris sob os cuidados de Cat Noir (Bryce Papenbrook), que fica em uma situação complicada já que Adrien foi chamado para a viagem. No entanto, o maior problema será um colar de garras de águia extremamente poderoso que está na mira de Hawk Moth (Keith Silverstein). Nesse momento, Ladybug terá que se unir aos heróis americanos para proteger a cidade que nunca dorme.",
"popularity": 882.522,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/kIHgjAkuzvKBnmdstpBOo4AfZah.jpg",
"release_date": "2020-09-26",
"title": "Miraculous World: Nova Iorque, Heróis Unidos",
"video": false,
"vote_average": 8.3,
"vote_count": 526
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/9xeEGUZjgiKlI69jwIOi0hjKUIk.jpg",
"genre_ids": [
14,
28,
12,
16
],
"id": 664767,
"original_language": "en",
"original_title": "Mortal Kombat Legends: Scorpion's Revenge",
"overview": "Após o massacre cruel de sua família pelo mercenário Sub-Zero, Hanzo Hasashi é exilado no tortuoso Netherrealm, lá, em troca de sua servidão ao sinistro Quan Chi, ele tem a chance de vingar sua família - e ressuscita como Scorpion, uma alma perdida e vingativa. De volta ao Earthrealm, Lord Raiden reúne uma equipe de guerreiros de elite - o monge Shaolin Liu Kang, a oficial das Forças Especiais Sonya Blade e o ator de ação Johnny Cage - um grupo improvável de heróis com uma chance de salvar a humanidade. Para fazer isso, eles devem derrotar a horda de gladiadores do Outworld de Shang Tsung e vencer o torneio Mortal Kombat.",
"popularity": 798.951,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/zO5913BWcWYrhgACNpaaw9CCycX.jpg",
"release_date": "2020-04-12",
"title": "Mortal Kombat Legends: A Vingança de Scorpion",
"video": false,
"vote_average": 8.4,
"vote_count": 805
},
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/cjaOSjsjV6cl3uXdJqimktT880L.jpg",
"genre_ids": [
10751,
14,
16,
35
],
"id": 529203,
"original_language": "en",
"original_title": "The Croods: A New Age",
"overview": "Os Croods 2: Uma Nova Era é uma aventura sobre uma família pré-histórica que descobre as transformações no mundo enquanto tenta permanecer unida.",
"popularity": 692.142,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/vRTScutueW9gLF3dSo2Za7o0v7n.jpg",
"release_date": "2020-11-25",
"title": "Os Croods 2: Uma Nova Era",
"video": false,
"vote_average": 7.5,
"vote_count": 1791
}
],
"total_pages": 500,
"total_results": 10000
}
Again... the intention is to put this information on the screen...as the Overview, movie name and image...