HTML JavaScript React / Redux Form: интерфейсная форма не публикует запись пользователя в БД

Question

Когда я заполняю свою внешнюю форму и пытаюсь опубликовать ее в своей внутренней базе данных ... данные не публикуются.

Я использую PostgreSql, Sequelize, React и Redux.

Я установил свою модель таблицы на заднем конце:

const Sequelize = require("sequelize");
const db = require("./database");

const Eyeball = db.define("eyeballtable", {
  imageUrl: {
    type: Sequelize.STRING
    // defaultValue:
    //   "https://res.cloudinary.com/dejiqayjc/image/upload/v1568046457/fundus_pics/test_images/ab7acf4fcbf0_fy6nll.png"
  }
});

module.exports = Eyeball;  

Я написал внутренний почтовый маршрут:

const router = require("express").Router();
const { Eyeball } = require("../db");

// GET /api/eyeballs

router.post("/", async (req, res, next) => {
  try {
    console.log(
      "REQ BODY #####################################################",
      req.body
    );
    const uploadedEyeball = await Eyeball.create(req.body);

    res.send(uploadedEyeball);
  } catch (err) {
    next(err);
  }
});

module.exports = router;

Затем я установил свое хранилище редуксов:

// Robots Redux

import axios from "axios";

// action variables

const ADD_EYEBALL = "ADD_EYEBALL";

// action creater

export const addEyeball = eyeball => ({
  type: ADD_EYEBALL,
  eyeball: eyeball
});

// THUNKS

// post eyeball

export const postEyeballThunk = newEyeball => async dispatch => {
  try {
    const response = await axios.post("/api/eyeballs", newEyeball);
    console.log("I ran", response);
    const createdEyeball = response.data;

    dispatch(addEyeball(createdEyeball));
  } catch (err) {
    console.log(err);
  }
};

// robots reducer
const initialState = [];

const eyeballReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_EYEBALL: {
      return [...state, action.eyeball];
    }
    default:
      return state;
  }
};

export default eyeballReducer;

Ниже представлен интерфейсный компонент:

import React, { Component } from "react";
import { connect } from "react-redux";
import { postEyeballThunk } from "../redux/eyeballs";
import { withRouter } from "react-router-dom";

const defaultState = {
  imageURL: "",
  success: false
};

class UploadEyeball extends Component {
  constructor() {
    super();

    console.log("CREATE EYEBALL PROP", this.props);
    this.state = defaultState;

    // bind methods
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value,
      success: false
    });
  };

  async handleSubmit(event) {
    event.preventDefault();
    try {
      // const res = await axios.post("/api/eyeballs", this.state);
      await this.props.postEyeballThunk(this.state);
      this.setState({
        success: true
      });
    } catch (error) {
      this.setState({
        errorMessage: `There was a problem creating the robot: ${error.message}`
      });
    }
  }

  // eslint-disable-next-line complexity
  render() {
    console.log("PROPS", this.props);
    console.log("STATE", this.state);
    return (
      <form
        onSubmit={event => {
          this.handleSubmit(event);
        }}
      >
        {/* 1. Eyeball */}
        <div className="form">
          <label htmlFor="imageURL">Eyeball Image URL:</label>
          <input
            name="imageURL"
            type="url"
            onChange={this.handleChange}
            value={this.name}
          />
        </div>

        <button type="submit" className="btn robot-submit">
          Submit
        </button>
        {this.state.success && <div>Posted to DB!</div>}
      </form>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    postEyeballThunk: eyeball => dispatch(postEyeballThunk(eyeball))
  };
};

export default withRouter(
  connect(
    null,
    mapDispatchToProps
  )(UploadEyeball)
);

А путь интерфейса к сайту указан ниже:

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { connect } from "react-redux";

import { postEyeballThunk } from "../redux/eyeballs";
import EyeballLoadComp from "./EyeballLoadComp";

export class Root extends React.Component {
  componentDidMount() {
    this.props.postEyeball();
  }

  render() {
    return (
      <Router>
        <div>
          <nav>Welcome!</nav>
          <h1>
            Welcome to StackBot Project Management: your robot employees are
            awaiting assignments!
          </h1>
          <p>This seems like a nice place to get started with some Routes!</p>
          {/* localhost */}
          <Route exact path="/" component={EyeballLoadComp} />
        </div>
      </Router>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    postEyeball: () => dispatch(postEyeballThunk())
  };
};

export default connect(
  null,
  mapDispatchToProps
)(Root);

После отправкиСсылка URL моего изображения в виде:

Ссылка URL, которую я пытался опубликовать, не попадает в мою базу данных.

Что такоеЯ делаю не так?