重定向到 React Router 中的另一个路由后的警告

Posted 2023-02-21

【中文标题】重定向到 React Router 中的另一个路由后的警告

【英文标题】：Warning after redirect to another route in React Router

【发布时间】：2018-11-25 23:17:18

【问题描述】：

我是 React 的新手，我有一个关于重定向路由器和已安装组件的问题，因为我收到了警告。请查看可能的组件：

class Activation extends React.Component 
  constructor(props)
    super()
    this.token = props.match.params.id
    this.state = 
        fadeOn: false
    
 
 componentDidMount()
    fetch('/api/activate/' + this.token, 
        method: 'PUT'
    ).then((response) => response.json())
    .then((message)=>
        if(message.success)
            this.setState(
                fadeOn: true,
                msg: message.message
            )  
         else 
            this.setState(
                fadeOn: true,
                errMsg: message.message
            )  
        
    )

render()
    return (
        <Grid>
            <Row>
                <img className="rabbit" src=rabbit/>
                <Fade in=this.state.fadeOn>
                    this.state.msg?
                        <Alert bsStyle="success" className="activeAlert">this.state.msg</Alert>
                        :
                        <Alert bsStyle="danger" className="activeAlert">this.state.errMsg</Alert> 
                    
                </Fade>
            </Row>
            <Redirect to="/"/>
        </Grid>

    )
  

export default Activation

path="/"中的组件

class Users extends Component 
 render() 
 return (
  <div>
    <h1>Users page!!!</h1>
  </div>
  );
 

export default Users;

我的目标是在激活他的帐户后重定向用户。一切正常，但重定向后我收到以下警告：Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method。你能解释一下我做错了什么，以及我的组件如何？

【问题讨论】：

请在路径"/"中添加要显示的组件的代码

更新问题

【参考方案1】：

这是因为在初始渲染本身中，您将重定向到“/”，然后在 componentDidMount 中设置状态。所以，

在构造函数中设置状态为，

this.state = 
        fadeOn: false,
        activationComplete: false ,
    

而在 fetch 的.then 中，你应该将状态设置为，

this.setState(
                fadeOn: true,
                msg: message.message,
                activationComplete:true
            )

然后，在渲染中，将现有的重定向语句替换为，

render()
    if(this.state.activationComplete)
      return <Redirect to="/"/>
    else
      return (
        <Grid>
            <Row>
                <img className="rabbit" src=rabbit/>
                <Fade in=this.state.fadeOn>
                    this.state.msg?
                        <Alert bsStyle="success" className="activeAlert">this.state.msg</Alert>
                        :
                        <Alert bsStyle="danger" className="activeAlert">this.state.errMsg</Alert> 
                    
                </Fade>
            </Row>

        </Grid>

    )