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!!
?.
(Optional chaining), assim:<li>Código: {cli?.cod}</li>
(não testei, não sei se conflita com JSX/TSX