axios.post内のconsole.logが表示されない

Question

ディレクトリ構成

ソースコード

// App.js

import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Signup from "./pages/Signup";
import TimeRecord from "./pages/TimeRecord";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/login" exact component={Login} />
          <Route path="/signup" exact component={Signup} />
          <Route path="/timeRecord" exact component={TimeRecord} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

// Signup.js

import styled from "styled-components";
import {Formik, Form, Field, ErrorMessage} from "formik"; 
import axios from "axios";
import * as Yup from "yup";

// styled-components →
const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
`;

const Box = styled.div`
  width: 300px;
  border: 1px solid black;
  border-radius: 10px;
  padding: 15px 50px;
  box-sizing: border-box;
`;

const Kiroku = styled.h2`
  margin: 0;
  font-size: 20px;
`;

const Title = styled.h2`
  margin: 5px 0 40px 0;
`;

const InpBox = styled.div`
  margin-bottom: 35px;
`;

const Label = styled.label`
  display: block;
`;

const Button = styled.button`
  display: block;
  background-color: black;
  color: white;
  width: 160px;
  text-align: center;
  text-decoration: none;
  margin-bottom: 50px;
  `;
// ← styled-components


const Signup = () => {

  const initialValues = {
    username: "",
    password: ""
  };

  const validationSchema = Yup.object().shape({
    username: Yup.string().min(1).max(15).required(),
    password: Yup.string().min(8).max(20).required(),
  });

  const onSubmit = (data) => {
    axios.post("http://localhost:3001/auth", data).then(() => {
      console.log("送信されました");　　　　　　// ①
      console.log(data);
    }).catch((err) => {
      console.log("err:", err);
    });
  }

  return (
    <Container>
      <Box>
        <Kiroku>Kiroku</Kiroku>
        <Title>サインアップ</Title>
        <Formik
          initialValues={initialValues}
          onSubmit={onSubmit}
          validationSchema={validationSchema}
        >
          <Form>
            <InpBox>
              <Label>ユーザ名</Label>
              <Field
                type="text"
                name="username"
                placeholder="1〜15字で登録してください"
              />
              <ErrorMessage name="username" component="span" />
            </InpBox>
            <InpBox>
              <Label>ユーザ名</Label>
              <Field
                type="password"
                name="password"
                placeholder="8〜15字で登録してください"
              />
              <ErrorMessage name="password" component="span" />
            </InpBox>
            <Button type="submit">サインアップ</Button>
          </Form>
        </Formik>
      </Box>
    </Container>
  );
}

export default Signup;

// Users.js

const express = require("express");
const router = express.Router();
const bcrypt = require("bcrypt");
const db = require("../connection");

router.post("/", (req, res) => {
  const {username, password} = req.body;
  const sqlSelect = `SELECT * FROM Users WHERE username='${username}'`;
  db.query(sqlSelect, (err_s, result_s) => {
    if (result_s.length === 0) {
      const sqlInsert = "INSERT INTO Users (username, password) VALUES (?, ?)";
      bcrypt.hash(password, 10).then((hash) => {
        db.query(sqlInsert, [username, hash], (err_i, result_i) => {
          if(err_i) console.log(err_i);
        });
      });
    } else {
      console.log("このユーザー名は使用できません");
    }
  });
});



module.exports = router;

// server/index.js

const express = require("express");
const app = express();
const cors = require("cors");

app.use(express.json());
app.use(cors());

// Routers
const usersRouter = require("./routes/Users");
app.use("/auth", usersRouter);

app.listen(3001, () => {
  console.log("Server running on port 3001");
});

概要

Signup.jsでユーザー名とパスワードを入力した値をaxiosで送信し、Users.jsでデータベースに保存するという流れになっています。

解決したいこと

Signup.jsの①部分のconsole.log("送信されました"); console.log(data);が表示されません。
どのようにすれば表示できるのでしょうか？

Comments

[FKM]

axios抜きにしてonSubmitメソッドは呼び込むことできているのでしょうか？