Estoy usando el componente react-select consumiendo datos desde una api-rest. La consulta y el retorno de los datos funciona correctamente. Sin embargo, falla lo siguiente la carga de los options en el select
Mi codigo desarrollado es el siguiente, desde el html lo llamo así:
<AsyncSelect cacheOptions defaultOptions loadOptions={this.loadRepuestos} />
Luego tengo mi code de la funcion loadRepuestos que es el siguiente:
loadRepuestos = (name) => {
if(name.length > 3 && this.state.peticionActiva !== true) {
const config = {
headers: { Authorization: `Bearer ${this.state.token['token']}` }
};
let url = API_REPUESTOS_FILTER + `?name=${name}`;
// console.log(this.state.token['token']);
this.setState({peticionActiva: true});
//seteo peticionActiva true para evitar que se desaten continuas peticiones
return axios.get(url,config)
.then(response => {
this.setState({peticionActiva: false});
let lista = response.data.data;
//armo el par {{value ... label.. } ......}
let options = lista.map(elemento => {
let item = {};
item.value = elemento.id;
item.label = elemento.name;
return item;
});
console.log(options);
// console.log({options: options});
return {options: options};
})
.catch(e => {
this.setState({peticionActiva: false});
if(e.response)
{
let error = '';
error = e.response.data.message;
console.log(error);
// this.setState({errorApi: error});
}
});
}
}
Imprimiendo en la consola, los datos viene y se ve como lo siguiente: