ReactJS Слишком много перерисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл

Question

Я так застрял. Вот код:

 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>
  );
};

, который выдает эту ошибку при "setDestination (destination);"

также говорится, что на DestinationRightBar произошла ошибка

Если удалить правую панель назначения, работает! Как правильно заставить это работать!

getDestinationByUrl - выборка

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);
}

Значение целевого объекта:

DestinationRightBar это просто еще один компонент, который использует целевой объект в качестве входных данных.

export default function DestinationRightBar(props) {
  const { destination } = props;

Answer 1

Ваш код useEffect действительно не имеет никакого смысла. С этим кодом вы говорите, что когда место назначения меняется, запускаете эффект, но в вашем эффекте у вас есть if (!destination), что означает, что если место назначения ложное, вызовите API, почему ??? Хуже того, вы пытаетесь изменить значение пункта назначения внутри эффекта, который вызовет бесконечность l oop.

Пожалуйста, потратьте несколько часов, чтобы узнать, как работает useEffect.

Официальные документы для useEffect.

Полное руководство Дана Абрамова об useEffect .

Я считаю, что вы должны использовать destinationUrl в качестве зависимости в useEffect. Это означает, что вызовите API при изменении destinationUrl, что имеет смысл.

  useEffect(() => {
    if (destinationUrl) {
      getDestinationByUrl(destinationUrl).then((destination) => {
        setDestination(destination);
      });
    }
  }, [destinationUrl]);