react中的动态路由和生命周期
react中的动态路由和生命周期
提问于 2020-01-24 19:32:13
我正在使用react中的动态路由。我正在从第三方API获取一些数据。我的动态路径是这样的
<Route path="/:id" component = {item} />
在item组件中，我以params.id格式获取值，并使用该id来获取数据
componentDidUpdate(){ fetchData(this.props.match.params.id);}
我现在遇到的问题是，每当我试图从Item组件访问另一个相同格式/:id的路由时，params会更改为传递的新id，但仍然保留旧id的旧内容。我相信componentDidmount没有被调用，因为我在同一个item组件中。组件没有重新挂载，而只是更新了。我能做什么?
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-24 19:44:55
您必须使用类component在componentDidMount和componentDidUpdate中进行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钩子+功能组件，这将为你简化。您可以使用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
</>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59895612
复制相关文章
相似问题
腾讯云开发者
