[Dúvida] Dados da api são perdidos ao atualizar a página | React

Boa tarde! Primeiramente desculpe fazer a pergunta se outra pessoa ja tenha feito, mas eu não sei nem como procurar a sulução.

Bom, estou consumindo uma api que me retorna um array com 20 objetos, e dentro de cada objeto tem as infos, como id, nome, etc.

Estou usando useEffect e fetch para consumir essa api.

Para exibir na tela, estou usando o map para percorrer esse array e me retornar o que eu quero, por exemplo o nome, e me retorna os 20 nomes.

Até ai ta tudo certo, mas eu quero retornar somente 1 desses objetos, então eu passei a posição do array e deu certo, mas ai começa o problema.

Se eu atualizo a pagina, não me retorna mais nada e no console me retorna um erro dizendo que não é possivel acessar as propriedades que estão indefinidas. Acredito que ao atualizar o meu array fica vazio por que não foi executado o map depois da atualização da página.

Alguém ja passou por isso, sabe como resolver? Qualquer ajuda é bem vinda! Agradeço desde ja. Obs. Se não ficou claro a minha dúvida, me avisa que tento explicar melhor.

Bom dia, Leonardo!

Você acabou de descrever um problema da falta de tratamento de dados, sua aplicação está esperando sempre receber os dados da API para renderizar os dados dela. Vejamos, você já está realizando a requisição via useEffect para pegar os dados provindos da API e armazenar estes dados em um estado React, mas estas requisições são assíncronas , ou seja, seu componente React carrega primeiro antes dos dados terem chegado a aplicação, e assim a sua aplicação tenta acessar dados que sequer existem. Como resolver isto?

Estabelecer um valor padrão no estado.

Como você está utilizando arrays, o valor padrão do seu useState pode ser um array vazio:

const [myState, setMyState] = useState([])

Assim sempre haverá um dado para acessar, mesmo que não tenha nada no array, o map não tentará mapear uma propriedade inexistente.

Estabelecer um loader.

Você pode criar um loader com um operador ternário para exibir um carregamento para o usuário, ou retornar um fragment enquanto os dados não chegam:


const myComponent = () => {
const [loading, setLoading] =  useState(true)
const [data, setData] = useState([])

useEffect(() => {
    ;(asnyc () => {
        await axios.get(myData).then(({ data }) => setData(data.data))
    })()
setLoading(false)
}, [])

return (
    <>
    {loading ? (<span>Loading...</span>) : (<p>{data}</p>)}
    </>
 )
}

const myComponent = () => {
const [loading, setLoading] =  useState(true)
const [data, setData] = useState([])

useEffect(() => {
    ;(asnyc () => {
        await axios.get(myData).then(({ data }) => setData(data.data))
    })()
}, [])

if (!data) {
    return <></>
}

return (
    <p>{data}</p>
 )
}

Mais ou menos isto, a ideia é prevenir que sua aplicação tente acessar dados inexistentes. Por exemplo se seu map está fora do useEffect você pode fazer algo como:

data && data.map('função_loka_aqui')

Aí o map só será executado se data de fato existir.