0

Pessoal, não consigo acessar as variáveis: cli.cod, cli.nome, cli.email.

O VS Code acusa:

A propriedade 'cod' não existe no tipo '{}'

A propriedade 'nome' não existe no tipo '{}'.

A propriedade 'email' não existe no tipo '{}'.

Com a variável {codigo} está tudo ok.

                <li>Cód.: {codigo}</li>
                <li>Código: {cli.cod}</li>
                <li>Nome: {cli.nome}</li>
                <li>Email: {cli.email}</li>

Alguém saberia me dizer o que acontece e como resolver o problema?

Durante o desenvolvimento tudo funciona APESAR do erro. Ele permanece, mas funciona bem.

No build dá o mesmo erro.

Segue o código:

"use client"

import { useState } from "react"

const Integracao = () => {
    const [codigo, setCodigo] = useState(1)
    const [cli, setCli] = useState({})
    
    const obterCliente = async ()=> {
        try {
            const resp = await fetch(`http://localhost:3000/clientes/${codigo}`)
            const dados = await resp.json()
            setCli(dados)
        } catch (error) {
            console.error("Erro ao obter cliente:", error)
            setCli({}) // Limpar cliente em caso de erro
        }
    }

    return (
        <>
            <div>
                <input className='text-black' type='number' value={codigo} 
                    onChange={e => setCodigo(+e.target.value)}/>
                <button onClick={obterCliente}>Obter Cliente</button>
            </div>
            <ul>
                <li>Cód.: {codigo}</li>
                <li>Código: {cli.cod}</li>
                <li>Nome: {cli.nome}</li>
                <li>Email: {cli.email}</li>
            </ul>
        </>
    )
}

export default Integracao

O módulo da API é src/app/clientes/[cliente]/route.ts:

export async function GET(req: Request) {

    const url = new URL(req.url)
    const segmentos = url.pathname.split('/').filter(segment => segment !== '')
    const id = segmentos[segmentos.length - 1]

    return Response.json({
        cod: `${id}`,
        nome: `Maria ${id}`,
        email: `mariamaria${id}@xyz.com`
    }, { status: 200 })
}

Com o route.ts está tudo ok.

O problema é no primeiro módulo.

Também já tentei usar a notação [] para acessar, mas tbm não funcionou.

                <li>Cód.: {codigo}</li>
                <li>Código: {cli['cod']}</li>
                <li>Nome: {cli['nome']}</li>
                <li>Email: {cli['email']}</li>

Já pesquisei vários artigos no google e na documentação do NX, mas não encontrei nada que pudesse solucionar o problema.

Agradeço qq ajuda!!

3
  • Provavelmente o erro é ocasionado porque a propriedade só vai existir depois da requisição completar, então as tags LI deveriam estar em um IF que checa se cli possui valor, ou simplesmente usar o operador ?. (Optional chaining), assim: <li>Código: {cli?.cod}</li> (não testei, não sei se conflita com JSX/TSX
    – Syzoth
    Commented 8/12/2023 às 23:26
  • Fiz a alteração e o problema continua: ``` <ul> <li>Cód.: {codigo}</li> <li>Código: {cli?.cod ?? 'Código vazio!'}</li> <li>Nome: {cli?.nome ?? 'Nome vazio!'}</li> <li>Email: {cli?.email ?? 'Email vazio!'}</li> </ul> ``` Não é um erro de digitação e o escopo pode ser testado. Não é apenas comigo que isso acontece. Apenas ainda não sei como refatorar para ter acesso às vari´veis. Alguém de JS/TS/Next pode ajudar, cara. Commented 9/12/2023 às 0:11
  • A pergunta e a resposta precisam estar nos conformes que lhe informei nos links, melhore a pergunta ao editar, ela será avaliada por 5 diferentes usuários na fila de analises para ver se está dentro do objetivo do Stack Overflow em Português (leia os link parte que diz: Seguem mais documentos importantes, produzidos pela própria comunidade), se sua edição estiver dentro dos conformes os 5 usuários provavelmente irão reabrir a sua publicação. Continue no chat
    – Syzoth
    Commented 9/12/2023 às 2:13

0

Pesquise outras perguntas com a tag .