Executando verificação de segurança...
1

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"
  ]
}
Carregando publicação patrocinada...
1

O erro está na sua resposta do servidor.

Do ID 0 ao 3 há uma propriedade text.

Do ID 4 em diante, a propriedade muda de nome para task.

1
1