1

我正在尝试使用渲染道具模式来获得更好的代码可重用性，为此我正在关注渲染道具组件（R），它包含生命周期方法以及来自 FC（F）的 clickHandler，它进行一些处理并更新 redux 存储。我在 (A) 组件内使用渲染组件 (R) 使用不同的道具 3 次。一旦我从 FC 使用 clickHandler，它就会调用来自渲染道具组件（R）的方法并更新商店，但渲染道具组件（R）中的 componentDidUpdate() 方法也会被调用 3 次，这不应该发生，它应该只被调用一次。无法知道并获取哪个 clickHandler 更新了商店。

渲染道具组件（R）中的 ComponentDidUpdate 和 handleUpload


/**
 * @remarks
 * call the `{uploadApiDispatcher}` with upload type and required params
 */
    handleUpload() {
        const { uploadApiDispatcher, uploadType } = this.props;
        const params: IUploadApiActionProp = {
            data: { name: 'sanjose' },
            fileIds: [1],
            uploadType,
        };
        uploadApiDispatcher(params);
    }

componentDidUpdate(prevProps, prevState) {
        const { remarks, uploadErrorMessage, uploading, uploadType } = this.props
        if(uploadType !== prevProps.uploadType){
            if (!uploading && remarks && remarks.length) {
            }
            if (!uploading && uploadErrorMessage) {
                message.error(uploadErrorMessage);
            }
        }
    }

组件（A）中使用的渲染道具功能（UploadRender）

<Col xs={24} sm={24} md={12} lg={8} xl={6}>
                                    <UploadRender
                                        render={props => (
                                            <UploadCard
                                                title="Upload admin users"
                                                subtitle="This will upload the admin users"
                                                {...props}
                                            />
                                        )}
                                        uploadType={uploadTypes.UPLOADADMINUSERS}
                                    />
                            </Col>
                            <Col xs={24} sm={24} md={12} lg={8} xl={6}>

                                    <UploadRender
                                        render={props => (
                                            <UploadCard
                                                title="Upload admin group"
                                                subtitle="This will upload the admin groups"
                                                {...props}
                                            />
                                        )}
                                        uploadType={uploadTypes.UPLOADADMINGROUPS}
                                    />
                            </Col>
                            <Col xs={24} sm={24} md={12} lg={8} xl={6}>

                                    <UploadRender
                                        render={props => (
                                            <UploadCard
                                                title="Upload internal users"
                                                subtitle="This will upload the internal users"
                                                {...props}
                                            />
                                        )}
                                        uploadType={uploadTypes.UPLOADINTERNAL}
                                    />
                            </Col>

请帮助我了解 componentDidUpdate 被多次调用以及如何知道哪个 clickHandler 被调用。

4

0 回答 0