I'm trying to fill in an object (json) when I click on an option in my autocomplete. However, the json is always empty in the first select. When I redo the query and select again, the json is filled with the previous option.
First time:
currentMusic >>>>>>>>>>> {autor: '', id: -1, indice: '', letra: '', titulo: ''}
currentMusic >>>>>>>>>>> {autor: 'Asaph Borba', id: -1, indice: '', letra: 'Tu que estás assentado no trono\r Sempre reinando, … Cristo, filho\r Ó vem, ó vem, ó vem\r Senhor Jesus', titulo: 'Alfa e Ômega'}
Always first time my json is not populate
My service:
const [filteredMusics, setFilteredMusics] = useState<any>([])
const [filteredMusic, setFilteredMusic] = useState<Music>(emptyMusic);
const [currentMusic, setCurrentMusic] = useState<Music>(emptyMusic);
const [selectedMusics, setSelectedMusics] = useState<Array<Music>>([])
const searchMusics = (event: any) => {
const service = new Service();
let query = event.query
let _filteredMusic: Array<Object> = []
service
.filtroMusica(query)
.then((response) => {
_filteredMusic = response.data.data_return;
setSelectedMusics(response.data.data_return);
})
.catch((error) => {
// Mensagem feedback
console.log(">>>>>>>>>> error: ", error);
})
.finally(() => {
if (_filteredMusic != undefined) {
let final = _filteredMusic.map((item: any) => {
return item.titulo;
})
setFilteredMusics(final)
}
})
}
//My autocomplete:
<AutoComplete
value={filteredMusic.titulo}
suggestions={filteredMusics}
completeMethod={searchMusics}
onChange={(e) => {
setFilteredMusic({
...filteredMusic,
titulo: e.target.value,
});
}}
onSelect={(e) => {
let titulo = e.value;
if (selectedMusics != undefined) {
selectedMusics.forEach((obj) => {
if(obj.titulo === titulo){
setCurrentMusic({
...currentMusic,
titulo: obj.titulo,
autor: obj.autor,
letra: obj.letra,
});
console.log("currentMusic >>>>>>>>>>>", currentMusic);
}
})
}
}}
/>