Javascript react中的动态路由和生命周期

我在react中使用动态路由。 我正在从第三方API获取一些数据。我的动态路线是这样的

在item组件中，我在

params.id

中获取值，并使用该id获取数据

componentDidUpdate（）{fetchData（this.props.match.params.id）；}

---

我现在遇到的问题是，每当我尝试从Item组件访问另一个格式相同的路由时，参数会更改为传递的新id，但仍然保留旧id的旧内容。我相信componentDidmount没有被调用，因为我在同一个Item组件中。组件没有重新安装，只是更新了。我能做什么？

您必须在

componentDidMount

中以及在

componentdiddupdate

中使用类component调用api。获取数据后，必须将其设置为组件的状态，以便直观地看到它

componentDidmount() {
  fetchData(this.props.match.params.id);
}

componentDidUpdate(prevProps, prevState){
  if(prevProps.match.params.id !== this.props.match.params.id) {
    fetchData(this.props.match.params.id);
  }
}

如果您更愿意使用react hooks+功能组件，这将为您简化。您可以使用

useState

在状态中维护数据

import React, { useEffect } from "react";
const YourComponent = props => {
    const { id } = props.match.params;
    // This will run every time id changes.
    useEffect(() => {
        fetchData(id);
    }, [id]); 

    return (
        <>
            Your api call
        </>
    );
};

import React，{useffect}来自“React”；
const YourComponent=props=>{
const{id}=props.match.params；
//这将在每次id更改时运行。
useffect（（）=>{
获取数据（id）；
}，[id]）；
返回(
您的api调用
);
};

您是否将数据设置为状态？您能否提供有关如何维护状态变量和数据格式的更多信息？