本文教你如何将动态结构的 json 对象（键名不固定、值为字符串数组）渲染为一组带标签的输入框，使用户可分别编辑每个数组项，解决初学者常见的“只渲染一个输入框”或“无法区分同键多个值”的问题。
本文教你如何将动态结构的 json 对象（键名不固定、值为字符串数组）渲染为一组带标签的输入框，使用户可分别编辑每个数组项，解决初学者常见的“只渲染一个输入框”或“无法区分同键多个值”的问题。
在 React 中处理动态 JSON 数据时，关键在于理解数据结构与 DOM 渲染逻辑的对应关系。你提供的原始 JSON 示例：
{ "color": ["black", "white", "yellow"], "storage": ["128", "256", "500", "1000"], "brand": ["apple", "samsung"] }
是一个对象，其每个属性（如 "color"）的值都是一个字符串数组。而你最初使用的 rs.map(([key, value]) => ...) 实际上是针对 Map 或 Object.entries() 返回的二维数组的写法——但 rs 是普通对象，直接调用 .map() 会报错或无效；更严重的是，即使能遍历，你也只对每个键创建了一个 ，导致所有数组元素被压缩进单个输入框（即你看到的“一行显示全部值”的效果）。
✅ 正确做法分两层嵌套遍历：
- 外层：用 Object.keys(rs) 获取所有动态键名（如 "color"、"storage"）；
- 内层：对每个键对应的数组 rs[key] 调用 .map()，为每个字符串元素生成一个独立 。
以下是完整、可运行的解决方案（含注意事项）：
wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support
下载
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
<div>
{Object.keys(rs).map((key) => (
<div key="{key}" classname="form-group">
<label htmlfor="{`${key}-0`}">{key}</label>
<div classname="values-container">
{rs[key].map((value, index) => (
<input key="{`${key}-${index}`}" input type="text" id="{`${key}-${index}`}" value="{value}" onchange="{(e)"> handleInputChange(key, index, e.target.value)}
className="form-input"
/>
))}
</div>
</div>
))}
</div>
? 关键细节说明（新手必看）：
- key 属性必须唯一且稳定：不能用 Math.random() 或 index 作为外层 key（因键名可能重复），推荐用 key 字符串本身；内层 input 的 key 应组合键名与索引（如 ${key}-${index}），避免同名键下多个 input 冲突。
- htmlFor 与 id 需匹配：为提升可访问性，
- handleInputChange 函数需设计为接收 (key: string, index: number, newValue: string)，以便精准更新嵌套数组中的指定元素。示例实现如下：
const handleInputChange = (key: string, index: number, newValue: string) => {
setRs(prev => ({
...prev,
[key]: prev[key].map((v, i) => i === index ? newValue : v)
}));
};
? 进阶提示： 若需支持动态增删数组项（如添加新颜色），可在每组输入后添加“+”按钮，通过 rs[key].concat("") 扩展数组；删除则用 filter 或 slice。但核心原则不变：始终两层遍历，保持 key 唯一，状态更新精准到索引。
掌握这一模式后，你就能灵活应对任意结构的动态配置表单——无论是商品规格、问卷选项还是多语言文案管理。
