本文教你如何将动态结构的 json 对象（键名不固定、值为字符串数组）渲染为一组带标签的输入框，使用户能分别编辑每个数组项，适用于商品筛选、配置表单等场景。
本文教你如何将动态结构的 json 对象（键名不固定、值为字符串数组）渲染为一组带标签的输入框，使用户能分别编辑每个数组项，适用于商品筛选、配置表单等场景。
在 React 中处理动态 JSON 数据时，关键在于双重遍历：外层按 Object.keys() 获取所有键，内层对每个键对应的数组值逐项渲染 。你原先的代码使用了 rs.map(([key, value]) => ...)，这仅适用于 rs 是二维数组（如 Object.entries(rs) 的结果），但你的数据结构是普通对象（如 { color: ['black','white'], storage: ['128','256'] }），直接 .map() 会报错或渲染异常——这正是你看到“空白”或错乱布局的根本原因。
✅ 正确做法如下：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
<div>
{Object.keys(rs).map((key) => (
<div key="{key}" classname="json-field-group">
<label htmlfor="{`${key}-0`}">{key}</label>
<div classname="value-inputs">
{rs[key].map((value, index) => (
<input key="{`${key}-${index}`}" type="text" id="{`${key}-${index}`}" value="{value}" onchange="{(e)"> handleInputChange(key, index, e.target.value)}
placeholder={`请输入 ${key} 的第 ${index + 1} 项`}
/>
))}
</div>
</div>
))}
</div>
? 注意事项：
- key 必须唯一且稳定：不能用 value（可能重复）或 index（数组顺序变化时引发错误），推荐组合 key 与 index（如 ${key}-${index}）；
- htmlFor 与 id 需匹配：为提升可访问性，
- handleInputChange 函数需支持三参数：(key: string, index: number, newValue: string) => void，用于精准更新嵌套数组中的某一项（例如通过 setState(prev => ({ ...prev, [key]: prev[key].map((v, i) => i === index ? newValue : v) }))）；
-
类型安全建议（TypeScript）：定义 rs 类型为 Record
，避免运行时 rs[key] 为 undefined 导致崩溃； - 空数组兜底：可在内层 .map() 前加 rs[key]?.length > 0 && 判断，防止 map 调用在 undefined 上。
? 进阶提示：若需支持动态增删数组项（如添加新颜色、删除某个存储容量），可在每组输入框旁增加“+”和“×”按钮，并扩展 handleAddItem(key) 和 handleRemoveItem(key, index) 方法。这样即可构建真正灵活的 JSON 配置编辑器。
