reload the useeffect funtion when post data : react js-CodePudding

i have this useeffect which has a get funtion and have a funtion called sentchat which has a axios.post method to post some data the data which i am posting through post method is fecthed in the useeffect mmethod axios get but i have to reload the page to see the posted data i want it to happen automaticaly

 function sentchat(e) {
    e.preventDefault();

    const config = {
      headers: {
        Authorization: `token `   localStorage.getItem("token"),
      },
    };
    const data = { receiver: props.id, message: inputField };
    axios
      .post("messages/send-message/", data, config)
      .then((res) => {
        console.log(res.receiverDetails);
      })
      .catch((error) => {
        console.log(error);
      });
  }

  useEffect(() => {
    const config = {
      headers: {
        Authorization: `token `   localStorage.getItem("token"),
      },
    };

    axios
      .get("messages/get-all-messages/?receiver="   props.id, config)
      .then((res) => {
        console.log(res.receiverDetails);
        setdata(res.data.receiverDetails);
        setMessage(res.data.messages);
      });
  }, [props.id]);

CodePudding user response：

You don't need useEffect to do that. You can use useCallback for that purpose as it can be use as side effect.

function sentchat(e) {
    e.preventDefault();

    const config = {
      headers: {
        Authorization: `token `   localStorage.getItem("token"),
      },
    };
    const data = { receiver: props.id, message: inputField };
    axios
      .post("messages/send-message/", data, config)
      .then((res) => {
         
        console.log(res.receiverDetails);
        callApi()
      })
      .catch((error) => {
        console.log(error);
      });
  }

 const callApi =  useCallback(() => {
    const config = {
      headers: {
        Authorization: `token `   localStorage.getItem("token"),
      },
    };

    axios
      .get("messages/get-all-messages/?receiver="   props.id, config)
      .then((res) => {
        console.log(res.receiverDetails);
        setdata(res.data.receiverDetails);
        setMessage(res.data.messages);
      });
  },[data]);

CodePudding user response：

Updated answer.

Add a ref (I will explain why later on)

    const mountedRef = useRef(true)

Change your useEffect to this

      useEffect(() => {
        if(mountedRef.current){
          getData();
        }
        return function cleanup() {
          mountedRef.current = false
        };
      }, [getData]);

We are going to add a new callback

    const getData = useCallback(async () => {
    const config = {
      headers: {
        Authorization: `token `   localStorage.getItem("token"),
      },
    };
        const res = await axios.get("messages/get-all-messages/?receiver="   props.id, config)
        //Also adding to check we have a response otherwise you will be setting the state of undefined which will crash.
        if(res.status === 200){
         //We use the ref here to confirm that this component is still mounted otherwise you will get leak errors.
          if(mountedRef.current){
             console.log(res.receiverDetails);
             setdata(res.data.receiverDetails);
             setMessage(res.data.messages);
          }
        }
      }, [])

Now you can call getData() whenever you need to.

So just add this to your post response

 function sentchat(e) {
    e.preventDefault();

    const config = {
      headers: {
        Authorization: `token `   localStorage.getItem("token"),
      },
    };
    const data = { receiver: props.id, message: inputField };
    axios
      .post("messages/send-message/", data, config)
      .then((res) => {
        console.log(res.receiverDetails);
        //ADD LINE HERE
        getData()
      })
      .catch((error) => {
        console.log(error);
      });
  }