Next.js + Typescript + primereact autocomplete

29 Views Asked by At

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.

Autocomplete

First time:

currentMusic >>>>>>>>>>> {autor: '', id: -1, indice: '', letra: '', titulo: ''}

Autocomplete

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);
                }
            })
        }
    }}
/>
0

There are 0 best solutions below