react-jsonschema-form 数组填写 key value

在`react-jsonschema-form`中处理数组时，特别是涉及到key-value对的填充，通常需要先设置一个JSON schema来定义数据结构。下面是一个基本的示例：

1. 安装依赖
首先安装`react-jsonschema-form`库，如果还没有安装，可以在项目中运行：

   npm install @rjsf/core @rjsf/react-native --save

2. 创建Schema
编写一个支持数组并指定key-value对的schema。例如，假设我们需要一个数组，每个元素都是一个对象，有`key`和`value`字段：

   {
     "type": "array",
     "items": {
       "type": "object",
       "properties": {
         "key": {"type": "string"},
         "value": {"type": "string"}
       },
       "required": ["key", "value"]
     }
   }

3. 使用Schema渲染Form
在组件中，结合`useRJSF`钩子来渲染form：

   import React, { useState } from 'react';
   import { useForm } from '@rjsf/reactive';
   import { renderField } from '@rjsf/core';

   function MyForm() {
     const { control, errors } = useForm({
       schema: { ...}, // 填写上面创建的schema
       defaultValues: { items: [{ key: '', value: '' }] }, // 初始化数据
     });

     // 渲染表单
     const fields = Object.keys(control.schema.items.properties).map((key) => (
       <div key={key}>
         {renderField(control, key)}
         {errors[key] && <p>{errors[key]}</p>}
       </div>
     ));

     return (
       <form>
         {fields}
         <button onClick={() => control.array.push({ key: '', value: '' })}>Add Item</button>
       </form>
     );
   }

   export default MyForm;

这里，我们创建了一个初始数组，点击"Add Item"按钮会动态添加新的key-value对。