Ajout de ifcondition dans componentdidupdate dans react mais aussi boucle infinie

J'ai une balise de lien que je l'envoie au même composant mais avec un paramètre différent. Pour cela, j'utilise componentdidupdate.Si j'aurais utilisé une balise d'ancrage, ce n'était pas nécessaire. J'ai ajouté une condition if dans componentdidupdate, puis une demande d'url et défini l'état mais obtenant une boucle infinie. Requête infinie allant au serveur Code du lien

Link to={`/tutorials/${id}/${courseid}`}>{title}</Link>

Dans componentdidupdate

async componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.params.id!== prevState.id ) {
 const { id } = this.props.params;
 const { courseid } = this.props.params;
 let url = `https://localhost:7058/Dashboard/api/Tutorial?ID=${courseid}`;
 this.setState({
 loading: true,
 });
 let data = await fetch(url);
 let parsedData = await data.json();
 this.setState({
 lectures: parsedData,
 courseid: courseid,
 id: id,
 loading: false,
 });
 //now api request for description
 let durl = `https://localhost:7058/Dashboard/api/Tutorial/GetTutorial?ID=${courseid}&TutorialID=${id}`;
 this.setState({
 loading: true,
 });
 let ddata = await fetch(durl);
 let dparsedData = await ddata.json();
 // console.log(dparsedData);
 this.setState({
 desc: dparsedData,
 loading: false,
 });
}

}

export default (props) => <Tutorial {...props} params={useParams()} />;

J'utilise React 18 et React Router Dom 6. Fournissez une solution pour cette version, veuillez ne pas suggérer de dégrader la version ou de la changer en composant basé sur la fonction

Solution du problème

Je pense que la condition est mal formée, vous voulez probablement comparer avec prevProps.params.id, ou peut-être this.state.idpuisqu'elle aurait été mise à jour lors d'un cycle de rendu précédent.

Exemple:

async componentDidUpdate(prevProps, prevState, snapshot) {
 if (this.props.params.id!== prevProps.params.id ) {
...
 }
}

ou alors

async componentDidUpdate(prevProps, prevState, snapshot) {
 if (this.props.params.id!== this.state.id ) {
...
 }
}