如何使我的表格根据年份动态变化？

Posted 2023-02-19

【中文标题】如何使我的表格根据年份动态变化？

【英文标题】：How do I make my table dynamically change based on year?

【发布时间】：2020-01-06 03:49:24

【问题描述】：

我正在尝试使用基于年份的 API 从我的数据库中提取的一些信息填充一个表。我正在使用 React Router，并希望在我的侧边栏中保留指向不同年份的链接，但动态更改作为此页面主要焦点的表格。

我可以让表格在第一年（2019 年，因为这是默认链接）呈现，但前提是它在 <Switch> 之外。这也导致了链接改变时不改变的问题。

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

    componentDidMount() 
        this.setState( isLoading: true );
        axios.get(
            `http://localhost/yearTable/$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() 
        // isLoading component

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

        return (
            // Removed for simplicity
                    // This returns a table
                    this.state.yearlyTable && <ListTable title=this.state.yearlyTable.Title data=this.state.yearlyTable.Bonds />
                        // This does not
                        <Switch>
                           <Route exact path=`/yearly_table/$this.props.match.params.yearId$this.props.location.search` render=() => this.state.yearlyTable && <ListTable title=this.state.yearlyTable.Title data=this.state.yearlyTable /> />
                        </Switch>
                    // Sidebar removed for simplicity
        );
    

export default withRouter(YearlyTable);

我想要实现的结果是它呈现第一个表格，但是当您按下其中一个链接时，它会使用新内容更改表格。

【参考方案1】：

这是因为您正在使用 componentDidMount。这仅在第一次渲染时调用，而不是在那之后。

你可以做类似的事情

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

        componentDidMount() 
            this.setState( isLoading: true );
            axios.get(
                `http://localhost/yearTable/$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()
             axios.get(
                `http://localhost/yearTable/newYearID$this.props.location.search`,
                 withCredentials: true 
            ).then(res => 
                const yearlyTable = res.data;
                this.setState( yearlyTable, isLoading: false );
            ).catch((error) => 
                console.log(error);
            );

        render() 
            // isLoading component

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

            return (
                // Removed for simplicity
                        // This returns a table
                        this.state.yearlyTable && <ListTable title=this.state.yearlyTable.Title data=this.state.yearlyTable.Bonds />
                       <Link onClick=this.updateData.bind(this, clickedItemYear)>Some Item</Link>
            );
        
    
    export default withRouter(YearlyTable);

您可以使用并阻止事件的Default 或 stopPropogation。最好进行函数调用，以便在有用户操作时再次调用它。