Form组件和react-json-view一起用无法正常显示

react 中 对 JSON 对象 数据的展示和操作

在 react hook 项目当中，最近遇到一个需求，就是后端有一些配置需要我们展示 一个 JSON 对象，使用 react-json-view 就可以完成了。

上代码:

首先是安装

yarn install react-json-view

接着是展示json数据：（从后端获取json展示）

// 1.导入
import ReactJson from 'react-json-view';

// 2.这个组件，有很多 api，其中 src 是必传项，所以定义一个src就可以了；
  const [jsonValue, setJsonValue] = useState({});

// 3.获取到后端给我们的数据，拿到后端返回的 json 字符串
const getDate = () => {
    getMetaDateList().then((res) => {
        setJsonValue(JSON.parse(res.data.data));
    })
}
// 4.直接当组件使用
return (
	<ReactJson src={jsonValue}></ReactJson>
)

然后是编辑 json 数据： （传给后端数据）

这里遇到一个坑

当antd 的 form 和 ReactJson 一起使用的时候，Json中的value展示失败的问题

// 下面是部分代码
import ReactJson from 'react-json-view';

  const [jsonValue, setJsonValue] = useState([]);

  const onAdd = (add: ISafeAny) => {
    console.log('add',add)
    setJsonValue(add.updated_src)
  }

  const onEdit = (edit: ISafeAny) => {
    console.log('Edit', edit.updated_src)
    setJsonValue(edit.updated_src);
  }

  const onDelete = (arr: ISafeAny) => {
    console.log('Delete', arr)
    setJsonValue(arr.updated_src)
  }
  
// 下面是 return 中的部分代码
  return (
    <Modal title='新增元数据' visible = {visible} onCancel={onCancel} onOk={AddMetaDate}>
      <Form form={form} layout='horizontal' labelCol={{ span: 4 }}>
        <Form.Item name = 'key' label='元数据名'>
          <Input placeholder='请输入' className={styles['form-item-list']} />
        </Form.Item>
        <Form.Item name = 'type' label='元数据类型'>
          <Radio.Group onChange={onTypeChange}>
            <Radio value='String'>string类型</Radio>
            <Radio value='JSON'>JSON类型</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item name = 'value' label='元数据值' >
          {metaType === 'String' ? 
          <Input placeholder='请输入' className={styles['form-item-list']} /> : 
          <ReactJson src={jsonValue} onAdd={onAdd} onEdit={onEdit} onDelete={onDelete}></ReactJson>}
        </Form.Item>
      </Form>
    </Modal>
  );

很明显，我们要的效果实现了，但是有个问题

这是输入过程中，输入的 value 值

当我们点击 绿色勾 后，

只显示了，名 和 值的类型，并没有展示 值

正常情况应该是

这里的 onEdit 回调中，打印的内容也是，修改后有 value 的

问题原因：

在官方文档中我们可以找到

被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性）

所以 有可能是注入的 value 在 ReactJson 当中与展示过程中某个 value 冲突了，所以才会导致展示不出来

解决办法：

因为 Form.Item 只会给它包裹的第一层自动添加属性，所以我们只需要多包裹一层即可

// 下面是 return 中的代码
  return (
    <Modal title='新增元数据' visible = {visible} onCancel={onCancel} onOk={AddMetaDate}>
      <Form form={form} layout='horizontal' labelCol={{ span: 4 }}>
        <Form.Item name = 'key' label='元数据名'>
          <Input placeholder='请输入' className={styles['form-item-list']} />
        </Form.Item>
        <Form.Item name = 'type' label='元数据类型'>
          <Radio.Group onChange={onTypeChange}>
            <Radio value='String'>string类型</Radio>
            <Radio value='JSON'>JSON类型</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item name = 'value' label='元数据值' >
          {metaType === 'String' ? 
          <Input placeholder='请输入' className={styles['form-item-list']} /> : 
          (<div>
            <ReactJson src={jsonValue} onAdd={onAdd} onEdit={onEdit} onDelete={onDelete}></ReactJson>
          </div>)}
        </Form.Item>
      </Form>
    </Modal>
  );

这样就可以保证正常的展示 value 了。

搞定！

下面是react-json-view 库提供的api ：

属性名	值类型	默认值	描述
src(必须)	JSON Object	无	需要展示的JSON数据
name	string或false	root	JSON数据的根节点(用默认或指定的根节点包裹自己的数据),使用null或false没有名字
theme	string	rjv-default	RJV支持base-16主题。具体的看后面
style	object	{}	可以通过style添加、修改样式,可覆盖主题默认提供的属性
iconStyle	string	triangle	接受参数:circle(圆)、triangle(三角形)、square(圆)
indentWidth	integer(整数)	4	JSON嵌套对象的缩进值
collapsed	boolean或integer	false	当设置为true，默认情况下，所有节点都将被折叠。使用整数值在特定深度折叠。
collapseStringsAfterLength	integer	false	这个就是超出内容会变成…的功能。当一个整数值被赋值时，字符串就会在这个长度后面接上省略号。可以通过单击字符串值来展开和折叠字符串内容
shouldCollapse	(field)=>{}	false	回调函数来提供对默认情况下应该折叠的对象和数组的控制。对象被传递给包含name, src, type(“数组”或“对象”)和namespace
displayObjectSize	boolean	true	当设置为true，对象和数组被标记为大小。例如: { a: 'a1',b: 'b1' },会显示2 items
displayDataTypes	boolean	true	当设置为true，数据类型会出现在数据的前缀值.例如: { a: 123, b: 'b1'},会显示{ a: int 123, b: string 'b1'}
onEdit	(edit)=>{}	false	当传入回调函数时，edit功能已启用。在编辑完成之前调用回调。详见《rjv-onEdit》
onAdd	(add)=>{}	false	当传入回调函数时，add功能已启用。在完成添加之前调用回调。《rjv-onAdd》
onDelete	(delete)=>{}	false }	当传入回调函数时，delete功能已启用。在完成删除之前调用回调。《rjv-onDelete》
onSelect	(select)=>{}	false	当传入函数时，单击值将触发onSelect方法将被调用。