在反应中的 componentdidupdate 中添加 ifcondition 但随后也是无限循环

Question

我有一个 link 标签，我将它发送到同一个组件，但参数不同。为此，我正在使用 componentdidupdate 。如果我会使用锚标记，则不需要它。我在 componentdidupdate 中添加了一个 if 条件，然后添加了一个 url 请求并设置了状态但得到了无限循环。无限请求到服务器 link

代码

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

在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()} />;

我正在使用react 18和react router dom 6. 提供此版本的解决方案，请不要建议降级或将其更改为基于功能的组件

Answer 1

我认为条件格式不正确，您可能想与 prevProps.params.id 或 this.state.id 进行比较，因为它会在之前的渲染周期中更新。

示例：

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

或

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

在反应中的 componentdidupdate 中添加 ifcondition 但随后也是无限循环

Adding ifcondition in componentdidupdate in react but then also infinite loop

reactjs

react-router