Выбор ввода возвращает undefined с использованием аксиомов на ReactJS

У меня есть выбор ввода, разработанный с помощью responseJS, параметры которого представляют собой имена категорий (получаемые из категорий таблиц) с использованием nodejs и MySQL.

Мой роутер:

exports.ajouterprod = function(req, res) {
    upload(req, res, function(imageUploadErr) {
        console.info("req", req.body);
        var today = new Date();
        var produits = {
            "Nomcat": req.body.Nomcat,
            "Img": imge
        }
        console.info("Image : " + req.body.Img);
        console.info(produits)
        connection.query('INSERT INTO produits SET ?', produits, function(error, results, fields) {
            if (error) {
                console.info("error ocurred", error);
                res.send({
                    "code": 400,
                    "failed": "error ocurred"
                })
            }
            else {
                res.send({
                    "code": 200,
                    "success": "produit registered sucessfully"
                });
            }
        })
    });
};

Мои занятия :

class AjouterProduit extends Component {
    constructor(props) {
        super(props)
        this.state = {
            Nomcat: [],
            Img: "",
            FormData :"",
        };

        this.handleSubmit = this.handleSubmit.bind(this);

    }
    componentWillReceiveProps(nextProps) {
        console.info("nextProps", nextProps);
    }
    componentDidMount() {
        axios({
            method: "get",
            url: "/app/getcat/",
            withCredentials: true,
        }).then(response => {
            if (response && response.data) {
                this.setState({
                    Nomcat: response.data
                });
            }
        }).catch(error => console.info(error));
    }
handleSubmit() {
        const formData = new FormData();

        formData.append('Nomcat', this.Nomcat);

        formData.append('Img', this.state.Img);

        axios({
            method: 'post',
            url: '/app/ajouterprod/',
            data: formData,
            withCredentials: true,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(function(response) {
            this.setState({
                alert: null
            });
            this.props.history.push('/produits/listeproduits')
        }.bind(this))
    }

 handleNomcatChange = (e) => {
        this.setState({
            Nomcat: e.target.value
        });
    }
 handleImgChange = (e) => {
        this.setState({
            Img: e.target.files[0]
        });
    }
render() {
        let {Nomcat} = this.state.Nomcat;


return (<div className = "animated fadeIn">
           <Row>
          <Col xs = "12"  >

              <Card>
                <CardHeader>
              <h4><strong>    <i className = "fa fa-cube"> </i> Ajouter un nouveau produit</strong></h4>

                </CardHeader>

                  <CardBody>
                    <Form className = "form-horizontal"  method = "POST" encType = "multipart/form-data" >
                      <FormGroup row>
                       <Col md = "3">
                    <h5>  <Label htmlFor = "hf-nom"><strong>Catégorie</strong></Label></h5>
                    </Col>
                    <Col xs = "12" md = "9">
                      <Input type = "select" name = "selectcat" id = "selectcat"   value = {this.state.Nomcat} >
                       <option  value = "" hidden>Choisissez la catégorie</option>
                       <option  value = "0" ></option>

                     { this.state.Nomcat.map((cat) => <option value = {cat} key = {cat.Nomcat}>{cat.Nomcat}</option>)
                      }           
                      </Input>
                    </Col>
                      </FormGroup>

                      <FormGroup row>
                    <Col md = "3">
                    <h5>  <Label htmlFor = "file-input"><strong>Image produit</strong></Label></h5>
                    </Col>
                    <Col xs = "12" md = "9">
                      <Input type = "file" id = "file-input" name = "file-input"  onChange = {this.handleImgChange} />
                    </Col>
                  </FormGroup>

Когда я запускаю его в своем интерфейсе, вы можете видеть:

Когда я выбрал категорию, она не была выбрана и все еще находится на <option value = "" hidden>Choisissez la catégorie</option>, когда я отправляю форму, она будет вставлена ​​в таблицу, но Nomcat будет иметь значение undefined.

Как я могу это исправить?