Update axios.get / refresh axios.get / get new record after add it on same function-CodePudding

I need to get a new record immediately after inserted new record with axios.post. I've tried axios.get after post but never got the newest record


const [listF,setListFin] = useState([])
const [fLen,setLenFin] = useState([])

const addRecord = () => { 
  for(let x = 0; x < kLen; x  ){
    Axios.post(mURL "/api/insert-profilematching", {      
      id_karyawan:id_karyawan,
      kd_kriteria:listK[x].kd_kriteria,
      nilai:s_kriteria[x], //ni nilainya
      s_gap:s_gap,
      bobot_ideal:listK[x].bobot_ideal, 
    }).then((res) => {

    });
  };
  Axios.get(mURL "/api/list-supertable-cfsf").then((response) => {
    setListFin(response.data)
    setLenFin(response.data.length)      
  }); 
}
console.log(listF)

I've tried putting the get request in the .then after post request, and still got nothing


const [listF,setListFin] = useState([])
const [fLen,setLenFin] = useState([])

const addRecord = () => { 
  for(let x = 0; x < kLen; x  ){
    Axios.post(mURL "/api/insert-profilematching", {      
      id_karyawan:id_karyawan,
      kd_kriteria:listK[x].kd_kriteria,
      nilai:s_kriteria[x], //ni nilainya
      s_gap:s_gap,
      bobot_ideal:listK[x].bobot_ideal, 
    }).then((res) => {
      Axios.get(mURL "/api/list-supertable-cfsf").then((response) => {
        setListFin(response.data)
        setLenFin(response.data.length)      
      }) 
    });
  };
}
console.log(listF)

I need to get the new record inserted the moment i insert it but the get request is still in the same function. Appreciate any clues or help.

CodePudding user response：

Better use async await to handle promises as follows.

const [listF,setListFin] = useState([])
const [fLen,setLenFin] = useState([])

const async addRecord = () => { 
  
    for(let x = 0; x < kLen; x  ){
    await Axios.post(mURL "/api/insert-profilematching", {      
      id_karyawan:id_karyawan,
      kd_kriteria:listK[x].kd_kriteria,
      nilai:s_kriteria[x], //ni nilainya
      s_gap:s_gap,
      bobot_ideal:listK[x].bobot_ideal, 
    })
  };

  const getRes = await Axios.get(mURL "/api/list-supertable-cfsf");
  
  setListFin(getRes.data)
  setLenFin(getRes.data.length)   
}

console.log(listF)

CodePudding user response：

Two options...

If your API responds to the POST requests with the newly created record, you don't need to make any extra GET requests.

Instead, collect the responses into an array and set them into your state once all complete.

const addRecord = async () => {
  const allResponses = await Promise.all(
    Array.from(
      { length: kLen },
      async (_, x) =>
        (
          await Axios.post(`${mURL}/api/insert-profilematching`, {
            id_karyawan,
            kd_kriteria: listK[x].kd_kriteria,
            nilai: s_kriteria[x],
            s_gap,
            bobot_ideal: listK[x].bobot_ideal,
          })
        ).data
    )
  );

  setListFin(allResponses);
};

Otherwise, use similar code to wait for all the POST requests to complete, then make your GET request

const addRecord = async () => {
  await Promise.all(
    Array.from({ length: kLen }, (_, x) =>
      Axios.post(`${mURL}/api/insert-profilematching`, {
        id_karyawan,
        kd_kriteria: listK[x].kd_kriteria,
        nilai: s_kriteria[x],
        s_gap,
        bobot_ideal: listK[x].bobot_ideal,
      })
    )
  );

  setListFin((await Axios.get(`${mURL}/api/list-supertable-cfsf`)).data);
};

I see no point in storing the length separately in either case since you can always get it from listF.length.