重定向后如何更新组件的状态？

Question

I'm creating a component that renders a page which includes a dropdown menu. When the user selects an option on the menu, I want him to be redirected to the selected page.

The code below works, meaning that the user is in fact redirected, but as soon as the new page is rendered I get the following error:

Warning: You tried to redirect to the same route you're currently on.

Here's my component:

class UserPage extends React.Component {

    constructor( props ) {

        super( props ); 

        this.state = {
            selectValue: this.props.match.params.slug, 
            redirect: false
        }

    }

    handleSelectChange( event ) {
        this.setState({
            selectValue: event.target.value, 
            redirect: true
        }); 
    }

    render() {

        const redirect = this.state.redirect; 

        if( redirect ) {
            return <Redirect to={ "/you/" + this.state.selectValue } />; 
        }

        return(
            <div>
                <PageHeader 
                    currentPageSlug={ this.state.currentPageSlug }
                    selectIntro="You're viewing"
                    selectOptions={ this.props.menus.userMenu }
                    selectDefault={ this.state.value } 
                    onSelectChange={ this.handleSelectChange.bind( this ) } />
            </div>
        );
    }

}

I believe the problem is that the state in constructor doesn't update when the component re-renders, so redirect still evaluates to true and the app tries to redirect again.

So the question is: how do I set redirect to false once the component re-rendered? I tried updating the state in methods like componentDidMount , componentWillMount , etc. but they all produce errors of their own...

Answer 1

There is a static method in life cycle called getDerivedStateFromProps(nextProps, prevState) , I used to componentWillReceiveProps() in old time, but it will be deprecated, you can have more information in doc .

In your case, It seems UserPage is like a template and taking this.props.match.params.slug as parameter to render different content. The problem here is when this component be mounted, React only check difference to re-render it but not re-mount it, you need getDerivedStateFromProps() to detect the new props coming and set new state.

class UserPage extends React.Component {

    constructor( props ) {

        super( props ); 

    }

    static getDerivedStateFromProps(nextProps, prevState)
        // Below won't work in this method.
        // this.setState({
        //   selectValue: nextProps.match.params.slug, 
        //   redirect: false
        //  });
        //
        // We need to return the new state object directly
        return {
          selectValue: nextProps.match.params.slug, 
          redirect: false
        }
    }

    handleSelectChange( event ) {
        this.setState({
            selectValue: event.target.value, 
            redirect: true
        }); 
    }

    render() {

        const redirect = this.state.redirect; 

        if( redirect ) {
            return <Redirect to={ "/you/" + this.state.selectValue } />; 
        }

        return(
            <div>
                <PageHeader 
                    currentPageSlug={ this.state.currentPageSlug }
                    selectIntro="You're viewing"
                    selectOptions={ this.props.menus.userMenu }
                    selectDefault={ this.state.value } 
                    onSelectChange={ this.handleSelectChange.bind( this ) } />
            </div>
        );
    }

}

Answer 2

This could also work if you're using an older version of react:

componentDidUpdate () {
    if (this.state.redirect) {
        this.setState({
            redirect: false
        })
    }
}