Rerendering a component - ReactJS, Axios

Question

After calling canBookSlot I want to update the slotsList I figure i have to make a new Axios request, can i reuse the useEffect whitin the then() method to rerender the component with updated properties or is there any other smart way of doing it without rewriting the Axios request?

 useEffect(() => {
    Axios.post("http://localhost:3001/api/get/week1/ex").then((response) => {
      setSlotsList(response.data);
    });
  }, []);

  let userDetailsString = localStorage.getItem("userDetails");
  const userDetailsObj = JSON.parse(userDetailsString);

  const canBookSlot = (id) => {
    if (userDetailsObj.canBook != 0) {
      Axios.post("http://localhost:3001/api/book/week1/ex", {
        room: userDetailsObj.room,
        id: id.id + 1,
      }).then(); // update the slotsList
    }
  };

EDIT:

The userDetailsObj is an object from another component, It isn't the same object as the ones in slotList how do i go about rerendering userDetailsObj

    const updateData = () => {
    Axios.post("http://localhost:3001/api/get/week1/ex").then((response) => {
      setSlotsList(response.data);
    });
  }

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

  let userDetailsString = localStorage.getItem("userDetails");
  let userDetailsObj = JSON.parse(userDetailsString);

  const canBookSlot = (id) => {
    if (userDetailsObj.canBook != 0) { // Always true 
      Axios.post("http://localhost:3001/api/book/week1/ex", {
        room: userDetailsObj.room,
        id: id.id + 1,
      }).then(() => updateData())
    }
  };

you can use useEffect with dependency array and add your slotlist in it. so whenever slotlist changes, use effect will rerun. Keep in mind, when your use effect runs, it runs all the functions inside use effect. also with new React versions, when state is updated, it should re-run the code in the same page. So depending on your needs, you can adopt an approach that you can reuse — Deniz Karadağ
– Deniz Karadağ, Commented Jul 11, 2022 at 10:58

Priyen Mehta · Accepted Answer · 2022-07-11 10:57:50Z

1

You can create common function and reuse when you want to call that axios api and update the data.

updateData = () => {
  Axios.post("http://localhost:3001/api/get/week1/ex").then((response) 
 => {
     setSlotsList(response.data);
   });
}

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

let userDetailsString = localStorage.getItem("userDetails");
const userDetailsObj = JSON.parse(userDetailsString);

const canBookSlot = (id) => {
if (userDetailsObj.canBook != 0) {
  Axios.post("http://localhost:3001/api/book/week1/ex", {
    room: userDetailsObj.room,
    id: id.id + 1,
  }).then(() => updateData()); // update the slotsList
}
};

answered Jul 11, 2022 at 10:57

Priyen Mehta

1,1671 gold badge7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Max Andersson Over a year ago

That worked, but the values in userDetailsObjs haven't changed. Is there anywatyto rerender userDetailsObj?

Priyen Mehta Over a year ago

I think you need to update the state, can you please provide updated code?

Max Andersson Over a year ago

I updated the post with relevant code

Priyen Mehta Over a year ago

userDetailsObj is a localstorageObject so you have to update manually by logic then it works.

Collectives™ on Stack Overflow

Rerendering a component - ReactJS, Axios

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related