本地运行Azure API管理开发者门户React自定义小部件时出错

问题原因 #

本地调试时URL的editorData参数为空（?editorData=），空字符串无法被解析为合法JSON，因此触发Unexpected end of JSON input错误。

解决方案 #

1. 临时手动补全URL参数 #

直接在浏览器地址栏的本地URL后补充合法的JSON结构，比如：
http://localhost:3000/?editorData={"configuration":{}}
可根据小部件实际配置需求调整JSON内的字段，确保格式有效。

2. 修改代码添加容错逻辑 #

找到项目中utils.ts里解析editorData的代码段，添加异常捕获和默认值处理，避免空参数导致崩溃：

const editorData = new URLSearchParams(window.location.search).get('editorData');
let parsedEditorData;

try {
  // 若参数存在则解析，否则使用默认配置
  parsedEditorData = editorData ? JSON.parse(editorData) : { configuration: {} };
} catch (error) {
  console.warn('解析editorData失败，使用默认配置');
  parsedEditorData = { configuration: {} };
}

3. 配置启动命令传入默认参数 #

修改项目package.json里的start命令，通过环境变量预设默认的editorData：

"scripts": {
  "start": "REACT_APP_DEFAULT_EDITOR_DATA='{\"configuration\":{}}' react-scripts start"
}

然后在代码中读取该环境变量作为 fallback：

const defaultData = JSON.parse(process.env.REACT_APP_DEFAULT_EDITOR_DATA || '{"configuration":{}}');
const editorData = new URLSearchParams(window.location.search).get('editorData');
let parsedEditorData;

try {
  parsedEditorData = editorData ? JSON.parse(editorData) : defaultData;
} catch (error) {
  parsedEditorData = defaultData;
}

内容的提问来源于stack exchange，提问作者DIBYA RANJAN TRIPATHY