TypeError：无法读取属性＆＃39; map＆＃39;在选择选项上未定义

Question

我开始添加选择菜单选项后出现此错误。表单在添加之前正在工作。我使用此代码动态生成多个表单。以下是包含错误的代码部分：

import React from 'react';

import classes from './Input.css';

const Input = (props) => {
    let inputElement = null;

    switch (props.elementType){
        case('input'):
            inputElement = <input 
            className={classes.InputElement}
            {...props.elementConfig} 
            value={props.value} 
            />;
            break;
        case('textarea'):
            inputElement = <textarea 
            className={classes.InputElement}
            {...props.elementConfig} 
            value={props.value} 
            />;
            break;
        case ( 'select' ):
             inputElement = (
                 <select
                     className={classes.InputElement}
                     value={props.value}>

                     {props.elementConfig.options.map(option => (
                         <option value={option.value}>
                             {option.displayValue}
                         </option>
                     ))}
                 </select>
            );
            break;
        default: 
            inputElement = <input 
            className={classes.InputElement}
            {...props.elementConfig} 
            value={props.value} 
            />;
    }

    return (
        <div className={classes.Input}>
            <label clasName = {classes.Label}>{props.label}</label>
            {inputElement}
    </div>
    ); 
};

导出默认输入;

以上代码用于创建表单的组件。表单生成正常，直到我将选项添加到select语句。：

import React, { Component } from 'react';

import classes from './Addowners.css';
import Input from '../../ui/Input/Input';

class Addowners extends Component {

    state = {
        addOwners:{
                name:{
                    elementType:'input',
                    elementConfig:{
                        type:'text',
                        placeholder: 'Business Name'
                    },
                    value:''

                },
                address:{
                    elementType:'input',
                    elementConfig:{
                        type:'text',
                        placeholder: 'Business Address'
                    },
                    value:''

                },

                city:{
                    elementType:'input',
                    elementConfig:{
                        type:'text',
                        placeholder: 'City'
                    },
                    value:''

                },

                state:{
                    elementType:'select',
                    elementConfig:{
                        options:[
                            {value:'AL', displayValue:'AL'},
                            {value:'KS', displayValue:'KS'},
                            {value:'TX', displayValue:'TX'}
                        ]
                    },
                    value:''

                },

                zipcode:{
                    elementType:'input',
                    elementConfig:{
                        type:'text',
                        placeholder: 'Zip Code'
                    },
                    value:''

                },

                phone_number:{
                    elementType:'input',
                    elementConfig:{
                        type:'text',
                        placeholder: 'Daytime Phone Number'
                    },
                    value:''

                },

                email:{
                    elementType:'email',
                    elementConfig:{
                        type:'email',
                        placeholder: 'Email'
                    },
                    value:''

            },

        }

        // loading:false
    }

    inputChangedHandler = (event, inputIdentifier) => {
        const updatedAddOwners = {
            ...this.state.addOwner
        };
        const updatedFormElement = { 
            ...updatedAddOwners[inputIdentifier]
        };
        updatedFormElement.value = event.target.value;
        updatedAddOwners[inputIdentifier] = updatedFormElement;
        this.setState({orderForm: updatedAddOwners});
    }

    render (){
        const formElementsArray = [];
        for(let key in this.state.addOwners){
            formElementsArray.push({
                id: key,
                config: this.state.addOwners[key]
            });
        }
        let form = (
            <form>
                <Input elementtType="..." element Config="..." value="..." />
                {formElementsArray.map(formElement => (
                    <Input 
                    key={formElement.id}
                    elementType={formElement.config.elementType} 
                    elementConfig={formElement.config.elementConfig}
                    value={formElement.config.value}
                    changed={(event) => this.inputChangedHandler(event, formElement.id)} 
                    />
                ))}

            </form>
        );


        return (
            <div className={classes.addOwners}>
                <h4>Enter Owners Data</h4>
                {form}
            </div>
        );
    }
}
export default Addowners;