Question

我有一个有状态组件，用作容器/页面组件，以从数据库中获取数据并呈现一些信息。该页面的URL例如为myurl.com/admin/orders/order-2019-3

在页面上，我具有上一个和下一个按钮。当推送其中一个时，用户必须查看上一个或下一个订单的数据。为此，我将onClick函数与this.props.history.push和上一个或下一个订单的url一起使用。例如this.props.history.push('/admin/orders/order-2019-4')。

不幸的是，只有网址正在更改。该页面未重新加载，并且未获取订单2019-4的数据。

所以我的问题是：我是否必须强制和更新，或者这种方法是否错误（我是否必须替换URL并调用获取新数据的函数？）

注意：我正在使用react-router-v4

我的容器组件的一些代码：

async componentWillMount() {
    const snapshot = await Database.ref(`orders/${this.props.match.params.orderID}`).once('value');

    if (snapshot.exists()) {
        const order = snapshot.val();
        this.setState({ order: snapshot.val() });
    } else {
        this.props.history.push('/admin/orders');
    }

    this.setState({ isFetching: false });
}


render() {
    const { order } = this.state;

    return (
        <React.Fragment>
            <header>
                <h1>{order.general.orderID}</h1>
            </header>

            <button onClick={() => this.props.history.push('/admin/orders/order-2019-03')}>Previous order</button>
        </React.Fragment>
    );
}

使用history.push（）将组件重新渲染到相同的组件但URL不同

0 个答案: