在React JS中从JSON动态创建输入表单元素

Question

我正在尝试从JSON动态创建表单元素，但是之后  创建输入元素，我无法处理其状态并分配  如果我选择的话，它们到特定元素会变得很奇怪，例如 下拉菜单，然后其他下拉菜单的值被冲洗掉。当我尝试更改其他文本字段的值时，下一个文本字段的值也会随之更新

renderCustomFields = () => {
     if (this.state.fieldsArray.status) {
        customFieldListArray = []
        this.state.fieldsArray.success.forEach((item, key) => {
            let stateName = item.name
            let error = item.name+"_error"
            if (item.activated && item.type == 'LIST' && item.possibleValues.length > 0) {
                let listArray = []
                item.possibleValues.forEach((data, menuKey)=>{
                    listArray.push({ value: data, text: data })
               })
                let defaultOption = item.possibleValues[0]
                console.log(this.state[stateName],stateName)
                customFieldListArray.push(
                    <DynamicSelectField
                        key={item.id}
                        name={item.name}
                        className="muiSelectField"
                        style={selectFieldStyles}
                        value={this.state[stateName]}
                        autoFocus={false}
                        hintText={item.name}
                        required={item.required}
                        //  errorStyle={{marginBottom:"1.2em", ...fieldErrorStyles}}
                        items={listArray}
                        //  errorText={
                        //   (this.state.errors.bot) && (
                        //     <FormattedMessage id={"ContactEditorForm.errors.bot" + this.state.errors.bot} defaultMessage="Error" />)}
                        onChange={(e, key, payload) => (this.handleSelectFieldChanged(item.id,payload,item.name,key))}
                    />

                )
            } else if (item.activated && item.type == 'LARGE_TEXT') {

                let state = fieldStateArray[key].name
                // this.setState({ state: fieldStateArray[key].name })
                customFieldListArray.push(
                    <TextField
                        key={item.id}
                        name={item.name}
                        className="muiTextField"
                        // style={fieldStyles} 
                        // errorStyle={fieldErrorStyles} 
                        maxLength={200}
                        id={key}
                        required={item.required}
                        // multiLine={true}
                        rows={1}
                        rowsMax={5}
                        value={this.state[stateName]}
                        ref={(el) => (this.fullNameDomElem = el)}
                        hintText={item.name}
                        errorText={this.state[stateName]}
                        onChange={this.handleTextFieldChanged}
                    />
                )
            } else if (item.activated && item.type == 'SHORT_TEXT') {
                let state = fieldStateArray[key]
                // this.setState({ state: fieldStateArray[key].name })
                customFieldListArray.push(
                    <TextField
                        key={item.id}
                        name={item.name}
                        className="muiTextField"
                        // style={fieldStyles} 
                        id={key}
                        required={item.required}
                        // errorStyle={fieldErrorStyles}
                        maxLength={200}
                        value={this.state[stateName]}
                        ref={(el) => (this.fullNameDomElem = el)}
                        hintText={item.name}
                        // errorText={
                        // (this.state.errors.fullName) && (
                        // <FormattedMessage id={"ContactEditorForm.errors.fullName" + this.state.errors.fullName}
                        //  defaultMessage="Error" />)}
                        onChange={this.handleTextFieldChanged}
                    />
                )
            } else if (item.activated && item.type == 'NUMERIC') {
                let state = fieldStateArray[key]
                // this.setState({ state: fieldStateArray[key].value })
                customFieldListArray.push(
                    <TextField
                        key={item.id}
                        name={item.name}
                        className="muiTextField"
                        // style={fieldStyles} 
                        // errorStyle={fieldErrorStyles} 
                        required={item.required}
                        maxLength={200}
                        // type="number"
                        value={this.state[stateName]}
                        ref={(el) => (this.fullNameDomElem = el)}
                        hintText={item.name}
                        id={key}
                        // errorText={
                        // (this.state.errors.fullName) && (
                        // <FormattedMessage id={"ContactEditorForm.errors.fullName" + this.state.errors.fullName}
                        //  defaultMessage="Error" />)}
                        onChange={this.handleTextFieldChanged}
                    />
                )
            }

        })
    }
    customFieldFlg=customFieldListArray.length
}