本文教你如何将动态结构的 json 对象（键名不固定、值为字符串数组）渲染为多组表单控件，使每个键对应一个标签，每个数组元素对应一个可编辑的输入框，并支持实时更新。
本文教你如何将动态结构的 json 对象（键名不固定、值为字符串数组）渲染为多组表单控件，使每个键对应一个标签，每个数组元素对应一个可编辑的输入框，并支持实时更新。
在 React 中处理动态 JSON 数据时，关键在于理解数据结构与 DOM 渲染逻辑的匹配关系。你提供的原始 JSON 是一个对象，其每个属性值均为字符串数组（如 "color": ["black", "white", "yellow"]），而非单个字符串。因此，不能直接用 rs.map() —— 因为 rs 是对象，不是数组，不支持 .map() 方法；而你原先的代码试图对对象解构为 [key, value] 数组，这仅适用于 Object.entries(rs)，且仍需对 value（即数组）做二次遍历。
✅ 正确做法分三步：
- 获取所有动态键名：使用 Object.keys(rs) 获取键数组（如 ["color", "storage", "brand"]）；
- 为每个键渲染一组输入框：对每个 key，再遍历 rs[key]（即对应字符串数组）；
- 确保状态更新精准：onChange 回调需同时传递 key、数组索引 index 和新值，以便在 handleInputChange 中准确更新嵌套状态。
以下是完整、可运行的示例代码（含状态管理与更新逻辑）：
import React, { useState } from 'react';
const DynamicJsonForm = () => {
// 初始 JSON 数据（键名和数组长度均动态）
const initialJson = {
color: ['black', 'white', 'yellow'],
storage: ['128', '256', '500', '1000'],
brand: ['apple', 'samsung'],
};
const [formData, setFormData] = useState(initialJson);
const handleInputChange = (key: string, index: number, newValue: string) => {
setFormData(prev => ({
...prev,
[key]: prev[key].map((val, i) => i === index ? newValue : val)
}));
};
return (
<div>
{Object.keys(formData).map(key => (
<div key="{key}" classname="mb-4">
<label classname="block font-medium mb-1">{key}</label>
<div classname="flex flex-wrap gap-2">
{formData[key].map((value, index) => (
<input key="{`${key}-${index}`}" type="text" value="{value}" onchange="{e"> handleInputChange(key, index, e.target.value)}
className="px-3 py-1 border rounded text-sm"
placeholder={`Enter ${key} ${index + 1}`}
/>
))}
</div>
</div>
))}
{/* 可选：显示当前状态用于调试 */}
<pre class="brush:php;toolbar:false;" classname="mt-6 p-4 bg-gray-100 overflow-x-auto text-sm">
{JSON.stringify(formData, null, 2)}
