在React.Js中执行更新后，无限componentDidUpdate（）呈现

Question

我有一张表，我必须在其中更新每一行中的特定字段。当我执行更新功能时，我正在comonentDidUpdate（）中调用（GET）自动更新表的函数将像这样无限执行：

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

这是我到目前为止构建的代码：

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} alt="" />
                        <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);

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

Answer 1

我看到您正在通过道具调用getAccesConfAction（）。此函数是什么样子，您正在父级的那个函数中执行任何setState来重新渲染子级吗？这是可能导致无限渲染的原因之一。