Algum erro na iteração?
Iae, pessoal! já estou tendo esse problema faz tempo mais não sei o que é e como resolver.
Faço uma requisição de uma API local feita com 'Json-Server' do JavaScript, recebo a requisição, passo para o hook 'useState' do React, que até ai tudo certo o 'console.log' imprimi todo o dado sem retorna undefined em nem um ponto, mais quando vou iterar com o 'map' direto no hook 'useState', 'allList', os ultimos elementos do array de objetos retorna undefined.
segui o codigo:
Arquivo App.tsx:
import axios from "axios";
import { useEffect, useState } from "react";
interface DataBase {
task: TaskAll;
// test: string[];
}
type TaskAll = { id: number; text: string }[];
export default function TodoList() {
const [allList, setAllList] = useState<TaskAll>();
useEffect(() => {
dbList();
}, []);
async function dbList() {
try {
const response = await axios.get("http://localhost:3000/task");
console.log("axios", response.data);
setAllList(response.data);
} catch (erro) {
console.log(erro);
}
}
const listAllTask = allList?.map((element: { id: number; text: string }) => {
console.log("in", element)
return (<div key={element.id}>{element.text}</div>)
})
console.log("allList", allList)
return (
<>
{listAllTask ? listAllTask : "carregando..."}
</>
);
}
server JSON:
{
"task": [
{
"id": 0,
"text": "0 testando json 1"
},
{
"id": 1,
"text": "1 escrever em algum lugar que o samuel é boi"
},
{
"id": 2,
"text": "2 compra pão com leite e ovo bulacha 3"
},
{
"id": 3,
"text": "3 compra pão com leite e ovo bulacha 4"
},
{
"id": 4,
"task": "4 compra pão com leite e ovo bulacha"
},
{
"id": 5,
"task": "5 escrever em algum lugar que o pedrin tbm é boi"
},
{
"id": 6,
"task": "6 lugar que o pedrin tbm é boi"
},
{
"id": 7,
"task": "7 lugar que o pedrin tbm é boi"
}
],
"test": [
"test"
]
}