Boa tarde a todos, estou tentando fazer um autocomplete com suggestion e uso o TypeScript, vi esta aplicação no youtube mas sem utilizar o TypeScript.
Quando rodo a aplicação ela funciona, mas mostra erro na pagina quando é carregada, por causa da falta de tipagem, gostaria de saber como fazer.
A aplicação funciona assim:
carrego os nomes que tenho no banco de dados vindos do back:
useEffect(() => {
const loadUsers = async() => {
const response = await api.get('/cadastrousuarios');
setUsers(response.data);
console.log(response.data);
}
loadUsers();
}, []);
na propriedade do input onChange eu chamei onChangeHandler:
<input type='text' className='col-md-12 input' onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeHandler(e.target.value)} value={text}/>
É no onChangeHandler que esta o problema, o código pega o valor que do get em .json e procura na coluna_nome os valores que são inputados no input e mostra as sugestões:
const onChangeHandler = (text: any) => {
let matches: React.SetStateAction<never[]>= [];
if (text.length>0){
matches = users.filter( user => {
const regex = new RegExp(`${text}`, 'ig');
return user.coluna_nome.match(regex);
})
}
setSuggestions(matches)
setText(text)
}
no return user.coluna_nome.match(regex) da erro no .coluna_nome. o erro é: Property 'coluna_nome' does not exist on type 'never'.ts(2339).
Sei que é problema de tipagem mas não sei como fazer a tipagem desse item, poderiam me ajudar por favor.
Obs: Quando abro a pagina da erro por causa dessa tipagem, mas eu fecho o erro e funciona certinho!
