react-json-view的使用注意事项、JSON.parse的小坑及React父子组件传值
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”,有几个需要注意的点:
- src是“需要展示的JSON数据”;
- 参数类型需要是 JSON Object;
- 无默认值。
如果src像我一样传递的参数jsonStr是String类型,那么需要用JSON.parse函数,将字符串转换为JSON的对象类型。
JSON.parse的使用
总所周知,JSON.parse()是用来将字符串解析成JSON Object对象的,但之前有两个问题没有注意过,在此记录:
-
JSON.parse()的参数不能为空,也不能为空字符 ‘’ ,只能为 ‘{}’;
-
如果JSON.parse()的参数无法成功解析成JSON对象,会报错。
(JSON.parse()报错时浏览器是不会捕捉错误的,最好是手动try、catch一下捕获异常)
React父子组件的传值问题
如何在父组件获取接口响应数据并将其传到子组件渲染呢?
子组件:
父组件:
写个参数的useState(注意此处的默认值,以防子组件的JSON.parse报错)
在请求接口的回调函数里获取响应数据并赋值
由于不一定每次响应的responseData都会有值,所以得考虑参数为空时的情况,此处如果不给result.responseData后面加上感叹号!的话会报错
*因为原来result没有responseData这个属性,所以interface这边要新增属性
最后再优化一下:刚打开弹窗的时候不显示内容
成品
未点击“测试连接”,预览数据为空时
点击“测试连接”后