如何让我的 table 根据年份动态变化？

Question

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

我可以让 Table 在第一年（2019 年，因为这是默认的 link）渲染，但前提是它在 <Switch> 之外。这也导致了当 link 改变时它不会改变的问题。

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);

我想要实现的结果是它呈现第一个 table，但是当你按下其中一个 link 时，它会改变 table新内容。

Answer 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);

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

如何让我的 table 根据年份动态变化？

How do I make my table dynamically change based on year?

json

api-design

typescript

reactjs

axios