Реакция «Post method» не отправляет данные в массив (Express Js) через Api на localhost

Question

Когда я пытаюсь нажать кнопку «Отправить», чтобы отправить данные из моей Формы на странице входа в приложение React, он не вносит никаких изменений в массив. Я чувствую, что он не устанавливает соединение с сервером (Back-end). Когда я использую Почтальон для проверки данных, я получил положительный результат. Я думаю, что проблема у меня только внутри кода страницы входа в систему.

приложение реакции работает на порту: 3000

приложение express работает на порту: 9000

это код страницы входа в систему:

import React from 'react';
import bodyParser from 'body-parser';
import axios from 'axios';

class Login extends React.Component {

    constructor(props){
        super(props);
        this.state={
            id :0,
            name : '',
        }

        this.submithandler = this.submithandler.bind(this)
    }

//function used on OnChange 

   handler = (event) =>{
    this.setState({[event.target.id] : event.target.value})
this.setState({[event.target.name]: event.target.value})
   }

// for Onsubmit method 

   submithandler=(e)=>{
    e.preventDefault();
     console.log(this.state);
     axios 
     .post('http://localhost:9000/api/person',this.state)
     .then(response=>{
       console.log(response);
     })
     .catch(error=>{
       console.log(error);
     })
   }

//some deatils changed just for test like type="email" => type="number" and the state vars
    render() {
      const {id , name} =this.state;
        return ( 
            <div className="container">
            <br/><br/>
            <div className="row">
            <div className="col-md-5">
            <h1 className="text text-center">Login</h1>
            <br/><br/>

  {/*  Login form start here */}

    <form onSubmit={this.submithandler}>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input name="id" onChange={this.handler} value={id} type="number" class="form-control" aria- describedby="emailHelp" placeholder="Enter email"/>
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input name="name" onChange={this.handler} value={name} type="password" class="form-control"  placeholder="Password"/>
  </div>
  <button type="submit" class="btn btn-success">My account</button>
</form>

{/*  Login form end */}



   </div>
   <br/>
   <div className="col-md-1" id="form-login"><strong>OR</strong></div>
   <br/>
   <div className="col-md-5">
   <h1 className="text text-center">Register</h1>
   <br/><br/>
   <form>
   <div class="form-group">
     <label for="exampleInputEmail1">Email address</label>
     <input autoComplete='true' type="email" class="form-control"  aria-describedby="emailHelp" placeholder="Enter email"/>
     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
   </div>
   <div class="form-group">
     <label for="exampleInputEmail1">Confirm Email</label>
     <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Confirm email"/>
     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
   </div>
   <div class="form-group">
     <label for="exampleInputPassword1">Password</label>
     <input type="password" class="form-control" placeholder="Password"/>
   </div>
   <div class="form-group">
     <label for="exampleInputPassword1">Retype Password</label>
     <input type="password" class="form-control"  placeholder="Confirm Password"/>
   </div>
   <div class="form-group form-check">
     <input type="checkbox" class="form-check-input" />
     <label class="form-check-label" for="exampleCheck1">I agree</label>
   </div>
   <button type="submit" class="btn btn-primary">Register</button>
 </form>
   </div>
            </div>
            </div>
        )
    }

}
export default Login;

вот код маршрута API на странице индекса

const express = require('express');
const app = express();
const http = require('http');
const port = process.env.PORT || 9000;
var bodyParser = require('body-parser');
const joi = require('joi');
const mongoose = require('mongoose');
require('dotenv/config');
const AppRoute = require('./routes/login.js');

app.use(express.json());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use('/login', AppRoute);

const person = [
    { id: 1, name: 'name1' },
    { id: 2, name: 'name2' },
    { id: 3, name: 'name3' }
];

app.post('/api/person', (req, res) => {

    const schema = {
        id: req.body.id,
        name: joi.string().min(3).required()
    }
    const result = joi.validate(req.body, schema);
    if (result.error) {
        res.status(400).send(result.error);
        console.log(result.error.details[0].message);
    } else {
        const per = {
            id: req.body.id,
            name: req.body.name
        };
        person.push(per);
        res.send(per);
    }
});

app.listen(port, () => {
    console.log(`connecting on  ${port}`);
})