如何根据路由动态更新内容？

Question

不久前我问了一个问题，得到了一个对我帮助很大的答案，但现在我又被难住了。我是 React 的新手，所以仍在学习一些提示和技巧。我有一个页面，其中包含 table 的全部内容，这些内容是根据年份从 API 中提取的。在边栏中，我列出了可能的年份。我最初被卡住是因为我只使用了 ComponentDidMount，但是当 link 被点击时，我得到了帮助，我需要一个更新功能。我现在遇到的问题是我需要按 link 两次才能更新内容。我可以在浏览器中看到路由发生了变化，但内容没有变化。

我尝试搜索 Google，但找不到任何内容。还尝试使用 React Router 的 this.props.history.push()，因为 API 本身基于 this.props.match.params.yearId 和 this.props.location.search，它们等于 Year?year=2019（或点击的年份）。

class YearlyTable extends React.Component {
    state = {
        yearlyTable: [],
        isLoading: false,
    }

    componentDidMount() {
        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);
        });
    }

    updateData(){
        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);
       });
    }

    render() {
        if (this.state.isLoading) {
            return (
                <Box style={{textAlign: 'center'}}>
                    <CircularProgress color="primary" />
                </Box>
            );
        }

        // Check what API returns
        console.log(this.state.yearlyTable);

        return (
            // Removed for simplicity
            {this.state.yearlyTable && <ListTable title={this.state.yearlyTable.Title} data={this.state.yearlyTable} />}

            // Removed for simplicity (Sidebar)
            // Example of link(MaterialUI, with RouterLink as React-Router-Dom's Link)
            <Link component={RouterLink} to={'/YearlyTable/Year?year=2018'} onClick={this.updateData.bind(this)}>2018</Link>
        );
    }
}
export default withRouter(YearlyTable);

理想的结果是无需按两次按钮即可动态更新信息，因为这是一种糟糕的用户体验。

Answer 1

使用 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);
        });
    }
}

如何根据路由动态更新内容？

How to dynamically update content based on route?

api-design

typescript

reactjs

react-router

axios