本文教你如何将动态结构的 json 对象（键名不固定、值为字符串数组）渲染为一组带标签的输入框，使用户能分别编辑每个数组项，适用于商品筛选、配置表单等场景。
本文教你如何将动态结构的 json 对象（键名不固定、值为字符串数组）渲染为一组带标签的输入框，使用户能分别编辑每个数组项，适用于商品筛选、配置表单等场景。
在 React 中处理动态 JSON 数据时，关键在于双重遍历：外层按 Object.keys() 获取所有键，内层对每个键对应的数组值逐项渲染 <input>。你原先的代码使用了 rs.map(([key, value]) => ...)，这仅适用于 rs 是二维数组（如 Object.entries(rs) 的结果），但你的数据结构是普通对象（如 { color: ['black','white'], storage: ['128','256'] }），直接 .map() 会报错或渲染异常——这正是你看到“空白”或错乱布局的根本原因。
✅ 正确做法如下：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
<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}`} // ✅ 唯一 key 避免重渲染问题
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 需匹配：为提升可访问性，<label> 的 htmlFor 应指向对应 <input> 的 id，建议统一用 ${key}-${index}；
- handleInputChange 函数需支持三参数：(key: string, index: number, newValue: string) => void，用于精准更新嵌套数组中的某一项（例如通过 setState(prev => ({ ...prev, [key]: prev[key].map((v, i) => i === index ? newValue : v) }))）；
- 类型安全建议（TypeScript）：定义 rs 类型为 Record<string, string[]>，避免运行时 rs[key] 为 undefined 导致崩溃；
- 空数组兜底：可在内层 .map() 前加 rs[key]?.length > 0 && 判断，防止 map 调用在 undefined 上。
? 进阶提示：若需支持动态增删数组项（如添加新颜色、删除某个存储容量），可在每组输入框旁增加“+”和“×”按钮，并扩展 handleAddItem(key) 和 handleRemoveItem(key, index) 方法。这样即可构建真正灵活的 JSON 配置编辑器。
