0

I have implemented a table using ag-grid react. I fetch data from an api to fill in that table.

const getDataForTable = async () => {
  try {
    //apis to fetch the data
    setGridData(apiData);
  }
  catch (err) {
    console.error(err);
  }
} 

useEffect(() => {
  getDataForTable();
}, []);

Now, I have also created an onClick method for deleting selected rows of the table. I am removing the rows from api as well. Once the rows are deleted, I just want to refresh the grid with updated data. Currently it only works if I explicitly reload the page.

const onClickRemoveRowsByIds = async () => {
  selectedRows.forEach(d => {
    listOfIds.push(d.Id);
  });
  if (window.confirm("Are you sure ?")) {
    await listOfIds.map((ele) => removeActiveList(ele));
    getDataForTable()
  }
}

But when I make a call to getDataForTable function, I get bad request error for the apis. On looking at the reponse body of the api : I get Invalid character found in method name. HTTP method names must be tokens. The authToken and rest of the information remains same but still fetch is not working again. Am I missing some step, or doing it completely wrong? The delete works fine, just the refresh is not happening.

user2128
  • 590
  • 2
  • 13
  • 35
  • Did you check your server API for why it's returning bad requests in 1st place? – Sanish Joseph Aug 25 '21 at 03:14
  • What are these mutating data, like selectedRows,listOfIds? – Sanish Joseph Aug 25 '21 at 03:16
  • selectedRows is a state which is updated based on the rows selected. And listOfIds is just an array – user2128 Aug 25 '21 at 03:53
  • 1
    listOfIds.map() returns a new array, not sure why you have await there? If you are awaiting on removeActiveList(ele) await should be just before that. – Sanish Joseph Aug 25 '21 at 03:56
  • Use a regular for loop and use await there or do like this, https://stackoverflow.com/questions/42489918/async-await-inside-arraymap – Sanish Joseph Aug 25 '21 at 04:03
  • Regarding server apis returning bad requests --- the api request is same as previous one which was successful. It works only on page loading. When I trigger the function explicitly, it fails – user2128 Aug 25 '21 at 04:07
  • use a for loop and await on removeActiveList() instead of map(). You are deleting items 1 by 1 and before finishing the operation as your await is in the wrong place, most probably your API is failing when you try to fetch something being changed. – Sanish Joseph Aug 25 '21 at 04:10
  • Even without the loop it acted that way. First I tried with single row delete, even then apis threw bad request error – user2128 Aug 25 '21 at 04:21
  • Not sure. Seems like there must be some difference while calling the API a second time. you may check with dev tools and use both API calls in postman and see if there is any difference. – Sanish Joseph Aug 25 '21 at 04:24

0 Answers0