在 React.Js 中进行更新后的无限 componentDidUpdate() 渲染

Posted 2023-02-23

【中文标题】在 React.Js 中进行更新后的无限 componentDidUpdate() 渲染

【英文标题】：infinite componentDidUpdate() rendering after doing an update in React.Js

【发布时间】：2019-11-28 06:19:25

【问题描述】：

我有一个表，我必须在其中更新每一行中的特定字段。当我进行更新时，我正在调用 (GET) 以在 comonentDidUpdate() 中自动更新表的函数被无限执行，如下所示：

这是视图，当我单击其中一个按钮更新循环时，循环开始时没有结束：

这是我目前构建的代码：

const confirm = Modal.confirm;

class AccesConf extends Component 

    constructor() 
        super();
        this.state = 
            accesConf: '',
            test: false
        ;
    

    static getDerivedStateFromProps(nextProps, prevState) 
        if (nextProps.accesConf !== prevState.accesConf && nextProps.accesConf) 
            return  accesConf: nextProps.accesConf ;
        
        else 
            return null;
        
    



    componentDidUpdate(prevProps, prevState) 
        // only update chart if the data has changed
        if (prevProps.accesConf !== this.props.accesConf) 
            this.props.getAccesConfAction()
        
    

    componentDidMount() 
        this.props.getAccesConfAction();
    


    showDeleteConfirmation(value, idConf, record, thisHandler) 
        confirm(
            title: 'Voulez vous supprimer cet contact ?',
            content: '',
            okText: 'Oui, je confirme',
            okType: 'danger',
            cancelText: 'Non',
            onOk() 
                deleteAccesConfRequest(idConf);
                const  accesConf  = thisHandler.state;
                let accesConfs = null;
                accesConfs = accesConf.findIndex((accesConfs) => accesConfs.idConf === idConf);
                accesConf.splice(accesConfs, 1);
                thisHandler.setState( accesConf: accesConf );
                NotificationManager.success("Le contact est supprimé avec succès !", "");
            ,
            onCancel() 
            ,
        );
    

    showUpdateInfoConfirmation(value, idConf, record, thisHandler) 
        confirm(
            title: 'Voulez vous modifier la visibilité d infos employeur ?',
            content: '',
            okText: 'Oui, je confirme',
            okType: 'danger',
            cancelText: 'Non',
            onOk() 
                alert(idConf)
                console.log('idConfcolorAvant', idConf)
                updateAccesConfRequest(idConf);
                console.log('idConfcolorApres', idConf)
                const  accesConf  = thisHandler.state;
                //accesConf.splice(record, 1);
                thisHandler.setState( accesConf: accesConf, test: true );
                NotificationManager.success("L'infos employeur est modifié avec succès !", "");
            ,
            onCancel() 
            ,
        );
    


    render() 
        const data = this.state.accesConf
        const columns = [
            
                title: 'Contacts',
                dataIndex: 'image',
                render: (text, record) => 
                    return <div className="gx-flex-row gx-align-items-center">
                        <img className="gx-rounded-circle gx-size-30 gx-mr-2" src=text  />
                        <p className="gx-mb-0">record.name</p>
                    </div>
                ,
            ,
            
                title: 'Société',
                dataIndex: 'societe',
                render: (text, record) => 
                    return <span className="gx-text-grey">record.societe</span>
                ,
            ,
            
                title: 'Dates',
                dataIndex: 'dates',
                render: (text, record) => 
                    return <span className="gx-text-grey">record.dates</span>
                ,

            ,
            
                title: 'Infos enployeur',
                dataIndex: 'infos',
                render: (text, record) => 
                    if (text === "Privé") 
                        return <Button className="cm-comedien-button-prive"
                            id=record.idConf
                            onClick=e => this.showUpdateInfoConfirmation(e.target.value, record.idConf, record, this)>text
                        </Button>
                     else 
                        return <Button type="primary" style= width: "70%" 
                            id=record.idConf
                            onClick=e => this.showUpdateInfoConfirmation(e.target.value, record.idConf, record, this)>text</Button>
                    
                ,
            ,
            
                dataIndex: 'delete',
                render: (text, record) => 
                    return <span className="gx-pointer">
                        <i className="icon icon-trash gx-pointer gx-text-danger gx-fs-xxl"
                            id=record.idConf
                            onClick=e => this.showDeleteConfirmation(e.target.value, record.idConf, record, this) />
                    </span>
                ,
            ,

        ];


        return (

            < Widget >
                / console.log("TesttttttttttttttNnnnnnnnnnnnnn", data) /
                <div className="gx-table-responsive">
                    <Table className="gx-table-no-bordered" columns=columns dataSource=data pagination=false
                        size="small" />
                </div>
                <NotificationContainer />
            </Widget >
        );
    



const mapStateToProps = ( comedien ) => 
    const  loaderUpdate, alertMessageUpdate, showMessageUpdate, alertMessageStatus, accesConf  = comedien;
    return 
        loaderUpdate,
        alertMessageUpdate,
        showMessageUpdate,
        alertMessageStatus,
        accesConf
    
;

export default connect(mapStateToProps, 
    hideMessageUpdate,
    showUpdateLoader,
    getAccesConfAction
)(AccesConf);

您对此有任何解决方案吗？任何帮助，将不胜感激。

【问题讨论】：

console.log prevProps.accesConf 和 this.props.accesConf 看看它们是否真的不相等。

是getAccesConfAction 更改了accesConf 的引用吗？

【参考方案1】：

我看到您正在通过道具调用 getAccesConfAction()。这个函数是什么样子的，你是否在父函数的那个​​函数中做任何 setState 正在重新渲染孩子？这是您遇到无限渲染的可能原因之一。