Question

我在ReactJS上遇到一个问题，即Axios请求链接到componentDidMount函数的无限循环。

这是东西：

首先：用户通过电子邮件收到链接（参数中带有令牌）
第二个：当他们单击链接时，他们到达了一个网页，可以在其中重置密码。我需要检查令牌是否始终可用：依赖于此，渲染将有所不同。

要检查令牌，我通过componentDidMount发出了POST请求。

最后，我得到正确的渲染，但是一次又一次地调用我的请求，从而在服务器上创建了一个无限循环。看来我的子组件一次又一次地重新构造。

这是我的代码：

子组件：

WHERE (col LIKE '%A%' AND col LIKE '%B%') OR (col LIKE '%C%' AND col LIKE '%D%')

父项：

import React from 'react';
import {Container} from 'reactstrap';

export default class ResetPassword extends React.Component {

    constructor(props) {
        super(props);
        console.log('CONSTRUCT')
    }

    componentDidMount() {
if (this.props.appState.loading ≡ false) {
            console.log('componentDidMount')
            let url = window.location.pathname;
            let verifToken = url.substr(15);
            this.props.checkToken(verifToken); //Make axios call on App.js
        }
   }

    render() {
        const {expiredToken} = this.props.appState;
        console.log(expiredToken)
        return (
            <div className="ResetPassword">
                <Container>
                    {expiredToken === true ?
                        (<div>VOTRE TOKEN A EXPIRE</div>
                        ) : (<div>CHANGER MON MOT DE PASSE</div>)}
                </Container>
            </div>
        )
    }
}

在我的控制台DevTool中，我有5个console.log（），这会变成一个无限循环：

CONSTRUCT->子代构造函数中的console.log（）
expiredToken-> console.log（）来自子项中的渲染
ComponentDidMount→来自componentDidMount的console.log（）
verifToken→来自componentDidMount的console.log（）
checkToken->来自父级的console.log（）

Answer 1

从checkToken组件中删除ResetPassword。

与其从checkToken调用ResetPassword，而是在Parent组件中调用它，然后使用state到ResetPassword组件传递数据。

  <ResetPassword appState={...this.state} {...props}/>

Answer 2

我认为在第一次加载childComponent并调用了checkToken函数之后，状态加载设置为false。您还使用setSatate强制从父组件重新渲染，并用它还强制从Chilcomponent挂载和从子组件强制componentDidMount方法。在第一次渲染之后，如果您尝试打印加载状态，请确保在第一次为true之后始终为false。

尝试为每个孩子创建本地状态，或再次考虑该功能的新实现。

ReactJS：无限循环渲染组件

子组件：

父项：

2 个答案: