0

i'm really new with js amd currentrly tring to make an app that gets data from a db in mysql using axios for the requests, to then pass the data to an array with an useState hook, on an array however i'm always facing the issue that the .then promise not always waits for the response to come, before executing other funcions inside it. Here:

const filtrarNombres =()=> {
    Axios.get('http://localhost:3001/api/getFiltrado', {params:{diasRestantes : document.getElementById("filtroDias")
    .value, money : document.getElementById("filtroMoneda").value  }}).then(response => {
      setServLista(response.data);
      return(console.log(response.data));
      
    })
  }

so, thanks to the console.log(response.data) i can see that it's the correct array of data, however, the setSerLista(response.data) is not waiting for the reponse to come, and triggers with nothing, causing a bunch of error when trying to render that.

this functions triggers onChange of a select list, basically what it does, it's that it sends the two params as filters for a select on mysql, the response, on the console.log is the expected one.

Thanks for taking your time reading!

i tried making the function async and adding await before the response, i also tried setting a timeout on setServLista(response.data); with no luck, it stills tries to render invalid data.

prueba envio
  • 1
  • 1
    The error you're experiencing is not in the code you posted. `setServLista` is indeed called with the same value as is logged in the console, it has to be. It would help if you showed where/how `filterNombres` was called – Adam Jenkins May 22 '23 at 23:32
  • This is probably more a problem regarding how you've initialised `servLista` and how you're using it in the rest of your code. I can't see anything wrong in the code in your question (other than the redundant `return`) – Phil May 22 '23 at 23:34
  • @AdamJenkins hey! thanks for answering, yes, indeed i think you are right, filterNombres is called onChange of two select lists, (the ones wich values are sent as parameters), then in the back those two values are sent to a stored procedure in mysql that end with a select where the filters are applied. This is where now i'm thinking the issue might be. Bc i do have other function with almost the same functionality, just that instead of running a SProcedure, it's a simple select, and the log(return) in both is not the same: – prueba envio May 23 '23 at 13:33
  • @AdamJenkins the simple one it's just an array with the fields and values, while the SP one is a little more complex object, with the array with fields and values just inside it. |||log(response.data) on the simple Select*: ` (6) [{…}, {…}, {…}, {…}, {…}, {…}]` //(if you drop down there are just all the entries).||| |||log(response.data) on the SProcedure: `(2) [Array(6), {…}]` ///(if you drop down on this one there is the `(6) [{…}, {…}, {…}, {…}, {…}, {…}]` just one *level* under, plus other two, i think i need to acces that array to fix the issue. – prueba envio May 23 '23 at 13:52
  • @Phil Hello, well the way it's initialised is like this: `const [servLista, setServLista]=useState([]);`, and setServ is mapped to add the results into a table based on their field, like this: `{servLista.map((val) => { return ( {val.licenciaNombre}`, this works perfect with the array from a simple select*, but from the SProcedure i mentioned in other comment, it doesn't bc (i think) the result from the select and the sprocedure are not the same (tryng to figure tht out nw, bc they both return the same table in mysql workbench) – prueba envio May 23 '23 at 14:01
  • to clarify, thank to the comments i figured out that the issue is that i'm not only getting the rowdatapackets as a results from the query, but also an okpacket, wich is causing the errors when i try to map the results. This doesn't seem to happen when the query does not include a Stored Procedure, and it's just a Select *, since i do have a similar function that just brings a select of the whole table, and i only get rowdatapackets as results, wich can get map() – prueba envio May 23 '23 at 15:36
  • and for last, i solved the issue of not getting just the rowdatapackets, but also the okpacket, by just adding [N] next to the results (N beeing the possition in where Data was in the array i was getting returned, (2) [Array(6), {…}] so 0) So with `res.send(result[0])`, i onlt sended the rowdatapackets, and with `res,send(result[1])` i would only send the okpacket. – prueba envio May 23 '23 at 15:53

0 Answers0