添加RichTextEditor后FileBrowser报错：TypeError: "cur.handler.call" is not a function

问题场景 #

使用Syncfusion ej2-react-filemanager（版本26.2.5）时，RichTextEditor功能正常，但FileBrowser无法正常工作，触发报错：TypeError: "cur.handler.call" is not a function。所有依赖已更新，且在全新项目中可复现该问题。

报错截图：

代码示例 #

import * as React from 'react';
import './fileManager.scss'
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar } from '@syncfusion/ej2-react-filemanager';
import { API_URL } from "../../config";

/**
 * File Manager full functionalities sample
 */
const FileManager = () => {

    const hostUrl: string = API_URL;

    function beforeAjaxRequestSent(args: any) {
        args.ajaxSettings.beforeSend = function (xhr) {
            xhr.httpRequest.setRequestHeader('X-Access-Token', localStorage.getItem("auth"));
        }
    }

    const ajaxSettings =
    {
        url: hostUrl + "/fms",
        getImageUrl: hostUrl + "/fms/GetImage",
        uploadUrl: hostUrl + '/fms/Upload',
        downloadUrl: hostUrl + '/fms/Download'
    }
    const toolbarSettings = {
        items: ['NewFolder', 'Upload', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details']
    }
    const contextMenuSettings = {
        layout: ['Upload', '|', 'SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', '|', 'Details', '|', 'SelectAll']
    }
    return (
        <div>
            <div className="control-section">
                <FileManagerComponent id="file-manager"
                    beforeSend={beforeAjaxRequestSent}
                    enableRtl={true}
                    ajaxSettings={ajaxSettings}
                    toolbarSettings={toolbarSettings}
                    contextMenuSettings={contextMenuSettings}
                    fileSelect={d => console.log('selected file',d)}
                    height='40rem'
                    view={"Details"}>
                    <Inject services={[NavigationPane, DetailsView, Toolbar]} />
                </FileManagerComponent>
            </div>
        </div>
    );
}
export default FileManager;

问题原因 #

你在beforeSend事件中直接覆盖了args.ajaxSettings.beforeSend函数，导致组件内部原有Ajax处理逻辑丢失，进而触发调用错误。

解决方案 #

修改beforeAjaxRequestSent函数，保留原有beforeSend逻辑并添加自定义请求头：

function beforeAjaxRequestSent(args: any) {
    // 保存组件原有beforeSend函数
    const originalBeforeSend = args.ajaxSettings.beforeSend;
    args.ajaxSettings.beforeSend = function (xhr: any) {
        // 执行原有逻辑
        if (originalBeforeSend) {
            originalBeforeSend(xhr);
        }
        // 添加自定义请求头（处理localStorage.getItem可能返回null的情况）
        xhr.setRequestHeader('X-Access-Token', localStorage.getItem("auth") || '');
    }
}

或者更简洁的方式，直接通过事件参数中的xhr对象设置请求头：

function beforeAjaxRequestSent(args: any) {
    args.xhr.setRequestHeader('X-Access-Token', localStorage.getItem("auth") || '');
}

说明 #

第二种方式无需处理原有beforeSend函数，直接操作args.xhr即可完成请求头添加，更简洁且不易出错。

内容的提问来源于stack exchange，提问作者kamiyar