Question

不久前我问了一个问题，得到的答案对我有很大帮助，但现在我又陷入了困境。我是React的新手，因此仍然学习一些提示和技巧。我有一个页面，其中包含一个表格，其中包含根据年份从API获取的内容。在边栏中，我列出了可能的年份。最初，我因为只使用ComponentDidMount而陷入困境，但是在单击链接时得到了需要更新功能的帮助。我现在遇到的问题是我需要按两次链接以更新内容。我在浏览器中看到路由已更改，但内容未更改。

我尝试搜索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);
        });
    }
}

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

1 个答案: