Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

A spread argument must either have a tuple type or be passed to a rest parameter.

Na função onClick={verMais} do componente ListaRestaurantes, obtenho o erro do título no spread de ...restaurantes:

A spread argument must either have a tuple type or be passed to a rest parameter.

O meu componente está codificado desta forma:

const ListaRestaurantes = () => {

  const [restaurantes, setRestaurantes] = useState<IRestaurante[]>([]);
  const [proximaPagina, setProximaPagina] = useState('')

  useEffect(() => {
    // obter restaurantes da api
    axios.get<IPaginacao<IRestaurante>>("http://localhost:8000/api/v1/restaurantes/")
    .then(resposta => {
      setRestaurantes(resposta.data.results);
      setProximaPagina(resposta.data.next);
    })
    .catch(erro => {
      console.log(erro);
    })
  }, []);

  const verMais = () => {
    axios.get<IPaginacao<IRestaurante>>(proximaPagina)
    .then(resposta => {
      setRestaurantes(...restaurantes, ...resposta.data.results);
      setProximaPagina(resposta.data.next);
    })
    .catch(erro => {
      console.log(erro);
    })
  }

Não consigo compreender exatamente qual é o erro, achei que restaurantes já fosse tipado como IRestaurante[], não é esse o caso? O que seria o tuple type neste caso?

Obrigado!

1 resposta
solução!

Acabei resolvendo a situação revendo mais uma vez o vídeo. Vou deixar a resolução aqui caso alguém caia no mesmo problema que eu.

O que aconteceu foi a falta de [] na seguinte linha:

setRestaurantes(...restaurantes, ...resposta.data.results);

Que deveria ser:

setRestaurantes([...restaurantes, ...resposta.data.results]);