Reactjs 如何基于路由动态更新内容？

不久前我问了一个问题，得到的答案对我帮助很大，但现在我又被难倒了。我对反应还不太熟悉，所以仍在学习一些技巧。我有一个页面，上面有一个表格，里面的内容都是根据年份从API获取的。在侧边栏中，我列出了可能的年份。我最初被卡住了，因为我只使用了ComponentDidMount，但得到了帮助，当单击链接时，我需要一个更新功能。我现在遇到的问题是，我需要按两次链接才能更新内容。我可以在浏览器中看到路线已更改，但内容未更改

我试着在谷歌上搜索，但什么也找不到。还尝试使用React Router的

this.props.history.push（）

，因为API基于

this.props.match.params.yearId

和

this.props.location.search

这两个变量，它们等于年份？年份=2019年（或单击的年份）

class YearlyTable扩展了React.Component{
状态={
年报表：[]，
孤岛加载：false，
}
componentDidMount（）{
this.setState（{isLoading:true}）；
axios.get(
`http://localhost/YearlyTable/${this.props.match.params.yearId}${this.props.location.search}`，
{withCredentials:true}
)。然后（res=>{
const yearlyTable=资源数据；
this.setState（{yearlyTable，isLoading:false}）；
}).catch（（错误）=>{
console.log（错误）；
});
}
更新数据（）{
this.setState（{isLoading:true}）；
axios.get(
`http://localhost/YearlyTable/${this.props.match.params.yearId}${this.props.location.search}`，
{withCredentials:true}
)。然后（res=>{
const yearlyTable=资源数据；
this.setState（{yearlyTable，isLoading:false}）；
}).catch（（错误）=>{
console.log（错误）；
});
}
render（）{
if（此.state.isLoading）{
返回(
);
}
//检查API返回的内容
console.log（this.state.yearlyTable）；
返回(
//为简单起见，删除了
{this.state.yearlyTable&&}
//为简单起见删除（侧栏）
//链接示例（MaterialUI，使用RouterLink作为路由器Dom的链接）
2018
);
}
}
使用路由器导出默认值（YearlyTable）；

---

理想的结果是信息可以动态更新，而不必按两次按钮，因为这是一种可怕的用户体验。

使用componentDidUpdate生命周期方法

componentDidUpdate(prevProps, prevState) {
    if (prevProps.location.search != this.props.location.search && this.state.isLoading != true) {
        this.setState({ isLoading: true });
        axios.get(
            `http://localhost/YearlyTable/${this.props.match.params.yearId}${this.props.location.search}`,
            { withCredentials: true }
        ).then(res => {
            const yearlyTable = res.data;
            this.setState({ yearlyTable, isLoading: false });
        }).catch((error) => {
            console.log(error);
        });
    }
}

---

使用componentDidUpdate生命周期方法

componentDidUpdate(prevProps, prevState) {
    if (prevProps.location.search != this.props.location.search && this.state.isLoading != true) {
        this.setState({ isLoading: true });
        axios.get(
            `http://localhost/YearlyTable/${this.props.match.params.yearId}${this.props.location.search}`,
            { withCredentials: true }
        ).then(res => {
            const yearlyTable = res.data;
            this.setState({ yearlyTable, isLoading: false });
        }).catch((error) => {
            console.log(error);
        });
    }
}

---

这非常有效，只需将

this.props.match.params.yearId

更改为

this.props.location.search

，因为这是API工作的参数。非常感谢你，我一直在挠头。还并没有听说过ComponentDidUpdateNo问题，componentDidUpdate生命周期方法将在每次特定组件的道具或状态更改时被调用。你可以在这里了解更多。这非常有效，只需将

this.props.match.params.yearId

更改为

this.props.location.search

，因为这是API工作的参数。非常感谢你，我一直在挠头。还并没有听说过ComponentDidUpdateNo问题，componentDidUpdate生命周期方法将在每次特定组件的道具或状态更改时被调用。你可以在这里了解更多。