1

I'm so stuck. Here is the code;

 const Destination = (props) => {
  const classes = useStyles();
  const destinationUrl = props.match.params.dest_url;
  const [destination, setDestination] = React.useState();

  useEffect(() => {
    if (!destination) {
      getDestinationByUrl(destinationUrl).then((destination) => {
        console.log("destination", destination); //result is attached below
        setDestination(destination);
      });
    }
  }, [destination]);

  return (
    <div className={classes.root}>
      <Grid container spacing={3} className={classes.mainGrid}>
        {destination && (
          <>
            <Grid item xs={12}>
              <Typography variant="h5" className="title">
                {destination.title}
              </Typography>
            </Grid>
            <DestinationRightBar destination={destination} />
          </>
        )}
      </Grid>
    </div>
  );
};

it gives this error on "setDestination(destination);" enter image description here

it also says error occured on DestinationRightBar

enter image description here

If I remove destination right bar it works! What is the right way to make it work!

getDestinationByUrl is a fetch

export function getDestinationByUrl(url) {
  return fetch(baseUrl + url, {
    method: "GET",
    headers: {
      Accept: "application/json",
      "content-type": "application/json",
      Authorization: `Bearer ${TOKEN}`,
    },
  })
    .then((response) =>
      response.ok ? response.json().then(handleResponse) : handleNotOk(response)
    )
    .catch(handleError);
}

Value of destination object is enter image description here

DestinationRightBar is just another component which uses destination object as input.

export default function DestinationRightBar(props) {
  const { destination } = props;
skyboyer
  • 22,209
  • 7
  • 57
  • 64
Kubilay Bayraktar
  • 73
  • 2
  • 10
  • can you add `getDestinationByUrl` code? cause its really weird – Hagai Harari Apr 24 '20 at 08:59
  • I added, it is just a fetch – Kubilay Bayraktar Apr 24 '20 at 09:01
  • What is the value of `destination` when you have set it using `setDestination`. – Utsav Patel Apr 24 '20 at 09:05
  • The value of destination is a json object. – Kubilay Bayraktar Apr 24 '20 at 09:11
  • I have edited the added the object – Kubilay Bayraktar Apr 24 '20 at 09:13
  • the thing here is why it works as expected when I remove the "DestinationRightBar" part? – Kubilay Bayraktar Apr 24 '20 at 09:23
  • Can you also add that DestinationRightBar code? Also where is the const getDest = part? – SuleymanSah Apr 24 '20 at 09:25
  • I've updated question, since the code is big I'm not pasting all of it. DestinationRightBar is just a component which uses destination as an input. – Kubilay Bayraktar Apr 24 '20 at 09:31
  • Since `destination` is an object, every time you set it react will see that as a new reference. You should use a primitive as a dependency. Use, `destination.id` as a dep or do a check of a property inside destination. Currently you are just checking `if(!destination)` – Utsav Patel Apr 24 '20 at 09:34
  • I did, "if (!destination.id) { " and ", [destination.id]" but it didn't work, same error! – Kubilay Bayraktar Apr 24 '20 at 09:39
  • It is impossible, if you have `destination.id` then your `if(!destination.id)` would turn into `if(false)`. Then `setDestination` would never be called for the second time. Can you provide a codesandbox replicating your issue?. Also do initialize your destination as {}. You can do so by `const [destination, setDestination] = React.useState({});` – Utsav Patel Apr 24 '20 at 09:43
  • can you add full `DestinationRightBar` code or at least the part you `destination` in? probably you refer something to it outside `useEffect` or something, and because `destination` set at parent `useEffect` first render, Bar gonna into infinite loop – Hagai Harari Apr 24 '20 at 09:51
  • In DestinationRightBar component this piece of code was causing the problem but why? if (destination.tags) { setTags(destination.tags.split(",")); } – Kubilay Bayraktar Apr 24 '20 at 10:07

1 Answers1

1

Your useEffect code really does not make any sense. With that code, you say when the destination changes, run the effect, but in your effect you have if (!destination) which means if destination is falsy call the api, why??? Even worse, you try to change the value of destination inside the effect which will cause infinite loop.

Please spend a few hours to learn how useEffect works.

Official Docs for useEffect.

Dan Abramov's complete guide about useEffect.

I believe you should use destinationUrl as dependency in the useEffect. Which means call the api when the destinationUrl changes, which make sense.

  useEffect(() => {
    if (destinationUrl) {
      getDestinationByUrl(destinationUrl).then((destination) => {
        setDestination(destination);
      });
    }
  }, [destinationUrl]);
SuleymanSah
  • 17,153
  • 5
  • 33
  • 54