Невозможно отправить письмо - отображается 400 неверных запросов при выполнении метода POST

Question

Раньше я просто отправлял электронную почту через POST method, но, добавляя библиотеку react-chips, я не могу отправить электронную почту, она показывает 400 неверных запросов. Я не мог понять, где я ошибаюсь.

Может кто-нибудь помочь мне в этом?

Перед добавлением реактивных фишек:

import React, { Component } from 'react'
import { Button, Icon, Modal, Form, TextArea } from 'semantic-ui-react'

import axios from "axios";


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
     email: '',
      subject: "",
      message: "", 
      error:''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleSubmit= e =>{
    e.preventDefault();
    const { email, subject, message } = this.state;
    const email_list = email.split(",");
    const data = {
      email: email_list,
      subject,
      message
    };

     axios.post(`/api/email`, data, { 
      headers: {'Content-Type': 'application/json'}  
      })
      .then(res => {
        console.log(res)
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err)
    })
    }


    checkEmailInput = value => {
      console.log(`checkEmailInput => value`, value);
      const regEx = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
      var result = value.replace(/\s/g, "").split(/,|;/);
      for (var i = 0; i < result.length; i++) {
        if (regEx.test(result[i])) {
          this.setState({
            error: 0,
            email: value
          });
        } else {
          this.setState({
            error: 1
          });
        }
      }
    };


    changeHandler = e => this.setState({[e.target.name]: e.target.value });

  render() {
    return (
      <Modal trigger={<Button animated inverted color='blue'>
        <Button.Content visible>Compose</Button.Content>
        <Button.Content hidden>
          <Icon name='plus' />
        </Button.Content>
      </Button>} closeIcon>

        <Modal.Content>
          <Form  >
            <Form.Input transparent label='Email' type="text" className='txtBox' name="email" value={this.state.email} onBlur={e => this.checkEmailInput(e.target.value)}  onChange={this.changeHandler}/>

            <Form.Input transparent label='Subject' type='text' className='txtBox' name="subject" value={this.state.subject} onChange={this.changeHandler} />

            <Button animated inverted color='blue' onClick={this.handleSubmit}><Button.Content visible >Send</Button.Content>
              <Button.Content hidden>
                <Icon name='envelope' />
              </Button.Content>
            </Button>
            <Button animated inverted color='red'><Button.Content visible>Discard</Button.Content>
              <Button.Content hidden>
                <Icon name='remove circle' />
              </Button.Content>
            </Button>
            {/* <Button animated inverted color='red' ><Button.Content visible>Save as Drafts</Button.Content>
              <Button.Content hidden>
                <Icon name='envelope' />
              </Button.Content>
            </Button> */}
          </Form>
        </Modal.Content>
      </Modal>
    );
  }
}

export default App;

После добавления реагирующего чипа в компоненте приложения:

import React, { Component } from "react";
import { Button, Icon, Modal, Form, TextArea } from "semantic-ui-react";
import axios from "axios";

import Chips, { Chip } from "react-chips";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {

      subject: "",
      error: "",
      chips: [],
      allMails: null
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount() {
    this.groupData();
  }

  handleSubmit= e =>{
    e.preventDefault();
    const { subject, message, chips } = this.state;
    // const email_list = email.split(",");
     chips.forEach(email => { 

      const data = {
        email: email,
        subject,
        message
      };

       axios.post(`/api/Email`, data, { 
        headers: {'Content-Type': 'application/json'}  
        })
        .then(res => {
          console.log(res)
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err)
      })

     })

    }

  onChipChange = chips => {
    this.setState({ chips });
  };

  groupData() {
    fetch("/api/groups")
      .then(response => response.json())
      .then(res => {
        const groupMails = res.item1.map(item => item.groupmail);
        const memberMails = res.item1.map(item =>
          item.membersEmails.map(member => member.membermail)
        );
        const AllMails = groupMails.concat(memberMails.flat(Infinity));
        this.setState({
          allMails: AllMails
        });
      });
  }


  changeHandler = e => this.setState({ [e.target.name]: e.target.value });



  render() {
    const { allMails } = this.state;
    return (
      <Modal
        trigger={
          <Button animated inverted color="blue">
            <Button.Content visible>Compose</Button.Content>
            <Button.Content hidden>
              <Icon name="plus" />
            </Button.Content>
          </Button>
        }
        closeIcon
      >
        <Modal.Content>
          <Form>
            <div>
              <Chips
                value={this.state.chips}
                onChange={this.onChipChange}
                suggestions={allMails}
                fromSuggestionsOnly={false}
              />
            </div>

            {/* <Form.Input transparent label='Email' type="text" className='txtBox' name="email" value={this.state.email} onKeyUp={this.addTags} onBlur={e => this.checkEmailInput(e.target.value)}  onChange={this.changeHandler} autoFocus/> */}

            <Form.Input
              transparent
              label="Subject"
              type="text"
              className="txtBox"
              name="subject"
              value={this.state.subject}
              onChange={this.changeHandler}
            />
            <Button animated inverted color="blue" onClick={this.handleSubmit}>
              <Button.Content visible>Send</Button.Content>
              <Button.Content hidden>
                <Icon name="envelope" />
              </Button.Content>
            </Button>
            <Button animated inverted color="red">
              <Button.Content visible>Discard</Button.Content>
              <Button.Content hidden>
                <Icon name="remove circle" />
              </Button.Content>
            </Button>
          </Form>
        </Modal.Content>
      </Modal>
    );
  }
}

export default App;

API электронной почты будет выглядеть так:

{
  "email": ["string"],
  "subject": "string",
  "message": "string"
}