动态渲染Form的问题

Question

用户选择select选项后，根据选择的option去服务端请求数据，然后根据服务端返回的数据，再次渲染到select下面的表单域里面

我的思路是这样的，Select绑定onchange，在onchange方法里面用户选择每一项的时候，根据选择的value请求后端，然后把后端返回的数据for循环拼装成字符串，最后ReactDOM.render到制定的dynamicform上面，现在的问题是如何拼装成一个虚拟dom，然后通过ReactDom.render渲染呢？直接通过字符串渲染的话会报错，还请各位协助，多谢

import { Select, Input } from 'antd';
import React from 'react';
import ReactDOM from 'react-dom';
const Option = Select.Option;


function handleChange(k) {
    fetch('http://test.com/'+k)
    .then(res => {
        return res.json().then((json) =>{
            console.log(json);
            let dynamicform = '';
            const formlenth = json.data.length;
            for (let i=0;i<formlenth;i++) {
                dynamicform += '<FormItem{...formItemLayout}label="'+json.data.[i].cn+'"hasFeedback>{getFieldDecorator('+json.data[i].en+', {rules: [{ required: true, message: "must not be empty!" }],})(<Input />)}</FormItem>';
            }
            //这里如果新命名一个class的话会报错，卡住了，不知怎么办好了。。。
            class Atest extends React.Component {
                render() {
                    return dynamicform;
                }
            }
            ReactDOM.render(<Atest>,document.getElementById('dynamicform'));
        })
    })

}

class JobTypeList extends React.Component {
    render() {
        const options = [];
        fetch('http://test.com')
        .then(res => {
            return res.json().then(function(json) {
                const joblength = json.data.length;
                for (let i=0;i<joblength;i++) {
                    options.push(<Option value={json.data[i].id}>{json.data[i].type_name}</Option>);
                }
                console.log(options);
            })
        })
        return (
            <Select
            showSearch
            style={{ width: 200 }}
            placeholder="Select a Job"
            optionFilterProp="children"
            onChange={handleChange}
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
                {options}
            </Select>
        )
    }
}
export default JobTypeList;

Answer 1

handleChange改下：

function handleChange(k) {
    fetch('http://test.com/'+k)
    .then(res => {
        return res.json().then((json) =>{
            console.log(json);
            const Atest = json.data.map(elem => {
                return <FormItem{...formItemLayout}label={elem.cn} hasFeedback>{getFieldDecorator(elem.en, {rules: [{ required: true, message: "must not be empty!" }],})(<Input />)}</FormItem>;
            });
            
            ReactDOM.render(<Atest />,document.getElementById('dynamicform'));
        })
    })

}