Question

我的页面/组件输出一个表单，在提交时调用我的后端API。如果成功，它将返回我添加到redux商店的对象。

我使用componentWillReceiveProps以便在我的组件中知道reducer是否成功将对象添加到我的商店的属性中。我从redux-router中包含了Redirect。

import { Redirect } from 'react-router-dom';

componentWillReceiveProps(nextProps) {

    if( nextProps.user.activeSubscriptions ) {
        this.props.user.activeSubscriptions = nextProps.user.activeSubscriptions;
    }

    if( Object.keys(nextProps.user.properties).length != Object.keys(this.props.user.properties).length ) {
        console.log("lets redirect.."); // this works
        return (<Redirect to={"/account/properties"} />); // this doesn't...
    }
}

如何在componentWillReceiveProps中的if（）语句中触发重定向？

Answer 1

您可以在那里使用window.location='/account/properties';，而不是return (<Redirect to={"/account/properties"} />); // this doesn't...

另一种方法是在默认状态下添加一个额外的属性，如下所示：

this.state = { userChanged: false };

如果这种情况有效，你需要在componentWillReceiveProps上添加一个setState，以便React知道它应该再次触发render方法，如下所示：

componentWillReceiveProps(nextProps) {

    if( nextProps.user.activeSubscriptions ) {
        this.props.user.activeSubscriptions = nextProps.user.activeSubscriptions;
    }

    if( Object.keys(nextProps.user.properties).length != Object.keys(this.props.user.properties).length ) {
        console.log("lets redirect.."); // this works
        this.setState({userChanged: true});
    }
}

然后在你的渲染方法上：

render() {
    if(this.state.userChanged) {
        return (<Redirect to={"/account/properties"} />);
    }
// Your other code goes here...

}

如何在componentWillReceiveProps中触发页面重定向？

1 个答案: