js 按数据的个数生成对应的控件

今天解决了2个问题：
1，string转化成json对象只需要：JSON.parse(this.state.paramsDto)
2，有一个json的数据，按数据个数生成控件
import React, { Component } from 'react';
import {Row, Col, Button} from 'antd';
import axios from 'axios';
import JSONInput from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';

class RpcMetaDetail extends Component{
constructor(props){
      super(props);
      this.state = {
//rpc meta 的id
rpcMetaId:1,
//存储className
className:'',
methodName:'',
returnType :'',
paramsDto: null

      }
}

componentDidMount() {
axios.get('/api/cheetah/rpcMeta/by/id',{
params:{id:this.state.rpcMetaId}
}).then(res=>{
this.setState({
className:  res.data.className,
methodName: res.data.methodName,
returnType: res.data.returnType,
paramsDto:  res.data.paramsDto
});
         })
}
//这个被当成了组件, 标准的控件输出： key是名字，value是一个框，还有一个保存的按钮
Item = (k,v) =>{
return (

{k} :
{v}
保存此param的值

)
}

todoList = (paramsMap) => {
var listKey = [];
var listValue = [];
var xx = JSON.parse(paramsMap)
for (var p in xx){
listKey.push(p)
listValue.push(xx[p])
}
console.log("=====")
console.log(listKey)
console.log(listValue)
return (

{listKey.map((listKey,i) => this.Item(listKey,listValue))}

)
}

render(){
return (
这是第 {this.props.match.params.id} 条rpc接口：
类的名字为： {this.state.className}
方法的名字的：  {this.state.methodName}
参数列表为：  {this.state.paramsDto}

然后就是根据参数列表解析出来。其实此时不需要再拆解，直接显示出来整体的值，主要是想做到dto：

{this.todoList(this.state.paramsDto)}

)
}

}

export default RpcMetaDetail;