useEffect(() => {
  setTimeout(async () => {
    await fetch(url)
      .then((res) => res.json())
      .then((data) => {
        if (Object.keys(data).length !== 0) {
          setIsLoaded(true);
          setRoundTrip(data);
        } else {
          Swal.fire({
            icon: "error",
            title: "Oops...",
            text: "No Flights Found",
            confirmButtonText: "Search Again...",
          })
            .then(function () {
              navigate("/");
            });
        }
      });
  }, 1000);
}, [url]);

It gives me the error message multiple time but I want to show the error message only one time then it should stop fetching.

CodePudding user response：

You can set conditions for res.status.

useEffect(() => {
  setTimeout(async () => {
    await fetch(url)
      .then((res) => res.json())
      .then((data) => {
        if(res.status === 500){
           Swal.fire({
            icon: "error",
            title: "Oops...",
            text: "No Flights Found",
            confirmButtonText: "Search Again...",
          })
            .then(function () {
              navigate("/");
            });
        }

        if (Object.keys(data).length !== 0) {
          setIsLoaded(true);
          setRoundTrip(data);
        } 
          
        
      });
  }, 1000);
}, [url]);