将箭头 function 传递给组件 prop

Question

I am trying to pass the result of the handleRedirectUrl() function to the ShortUrlField component as a prop.

I don't know what I am doing wrong, please help me

const handleRedirectUrl = () => {
    urlService
      .getShortenedUrl(urls.slice(-1)[0].short_url)
      .then((returnedUrl) => {
        setRedirectedUrl(returnedUrl);
      })
      .catch((error) => {
        handleCreateErrors(error);
      })
      .finally(() => {
        return redirectedUrl;
      });
  };

  //display shortened url
  const shortUrlDisplay = renderShortUrl ? (
    <ShortUrlField
      originalUrlValue={urls.slice(-1)[0].original_url}
      shortUrlValue={urls.slice(-1)[0].short_url}
      redirectedUrlValue={handleRedirectUrl()}
    />
  ) : (
    <EmptyField />
  );

The urlService function

const getShortenedUrl = (urlToGet) => {
  const request = axios.get(redirectShortenedUrl + `${urlToGet}`);
  return request.then((response) => response.data);
};

Edit 1: I was not returning anything with my handleRedirectUrl function. Also, I was not passing it properly to the props. I have changed my code to

  const handleRedirectUrl = () => {
  return urlService
    .getShortenedUrl(urls.slice(-1)[0].short_url)
    .then((returnedUrl) => {
      setRedirectedUrl(returnedUrl);
    })
    .catch((error) => {
      handleCreateErrors(error);
    })
    .finally(() => {
      return redirectedUrl;
    });
};

//display shortened url
const shortUrlDisplay = renderShortUrl ? (
  <ShortUrlField
    originalUrlValue={urls.slice(-1)[0].original_url}
    shortUrlValue={urls.slice(-1)[0].short_url}
    redirectedUrlValue={handleRedirectUrl}
  />
) : (
  <EmptyField />
);

It does not work. the getShortenedUrl function is never called

Edit 2: Added the ShortUrlField component code

import React from "react";


const ShortUrlField = (props) => {
return (
  <div>
    <p>
      <a href={props.originalUrlValue}>{props.originalUrlValue}</a> became{" "}
      <a href={props.redirectUrlValue}>{props.shortUrlValue}</a>
    </p>
  </div>
);
};

export default ShortUrlField;

Edit 3: I made it work!!

Many thanks to @ZsoltMeszaros for pointing out the right path to me.

I have passed a state variable to my conditional rendered component, and added an effect hook that basically sets the state if the component is rendered.

Much thanks to all of you that commented.

Answer 1

I didn't understand where is this setRedirectURL function, but anyway your handleRedirectUrl function returns nothing

const handleRedirectUrl = () => {
  return urlService
    .getShortenedUrl(urls.slice(-1)[0].short_url)
    .then((returnedUrl) => {
      setRedirectedUrl(returnedUrl);
    })
    .catch((error) => {
      handleCreateErrors(error);
    })
    .finally(() => {
      return redirectedUrl;
    });
};

May this can work as you can see like your axios request, this is returning result of urlService.