JSON神器react-json-view的安装配置与使用

• 需求是：请求第三方接口，将响应结果以JSON形式在页面展示
• 项目背景：React + ts

RJV的说明

RJV，也就是react-json-view的安装配置使用在此就不赘述了，详细的教程很多，参考如下等：

• 官方: Git
• 样例: Demo
• 博客: 最全的react-json-view用法
• 博客: react-json-view（一看就会的教程）
• 博客: react-json-view示例

RJV的使用问题

为实现需求，我用< pre>画了个框，然后用RJV的< ReactJson>展示内容：

此处需要注意的是上图箭头标注的< ReactJson>的属性 “src”，有几个需要注意的点：

1. src是“需要展示的JSON数据”；
2. 参数类型需要是 JSON Object；
3. 无默认值。

如果src像我一样传递的参数jsonStr是String类型，那么需要用JSON.parse函数，将字符串转换为JSON的对象类型。

JSON.parse的使用

总所周知，JSON.parse()是用来将字符串解析成JSON Object对象的，但之前有两个问题没有注意过，在此记录：

1. JSON.parse()的参数不能为空，也不能为空字符 ‘’ ，只能为 ‘{}’；
   
   

2. 如果JSON.parse()的参数无法成功解析成JSON对象，会报错。
   （JSON.parse()报错时浏览器是不会捕捉错误的，最好是手动try、catch一下捕获异常）

React父子组件的传值问题

如何在父组件获取接口响应数据并将其传到子组件渲染呢？

子组件：


父组件：

写个参数的useState（注意此处的默认值，以防子组件的JSON.parse报错）

在请求接口的回调函数里获取响应数据并赋值

由于不一定每次响应的responseData都会有值，所以得考虑参数为空时的情况，此处如果不给result.responseData后面加上感叹号！的话会报错

• 参考: typescript变量名后面的感叹号是什么意思？
  

*因为原来result没有responseData这个属性，所以interface这边要新增属性

最后再优化一下：刚打开弹窗的时候不显示内容

成品

未点击“测试连接”，预览数据为空时

点击“测试连接”后