将状态发布到Firebase

Question

我正在尝试将name从状态发布到Firebase，并保持状态405。

我尝试更改导入和发送数据的方式，但是我无法弄清楚哪里出了问题。

Index.js：

import React, { Component, Fragment, useState } from "react";
import { render } from "react-dom";
import axios from "axios";
import firebase from "firebase";

import { firebaseConfig } from "./firebase";

import Header from "./components/Header";

import "./style.css";

const App = () => {
  const [name, setName] = useState("Ryan");

  const handleClick = e => {
    console.log("Working");
    axios.post(
      "https://lq-time-tracking.firebaseio.com/",
      { name },
      { firebaseConfig }
    );
  };
  return (
    <div>
      <Header name={name} handleClick={handleClick} setName={setName} />
    </div>
  );
};

render(<App />, document.getElementById("root"));

Header.js：

import React from "react";
import styled from "styled-components";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./Home";

import "../style.css";

const Header = ({ name, handleClick, setName }) => {
  return (
    <Router>
      <nav className="navbar">
        <Link className="nav-item" to="/contact">
          Contact
        </Link>
        <Link className="nav-item" to="/about">
          About
        </Link>
        <Link className="nav-item" to="/home">
          Home
        </Link>
      </nav>
      <Switch>
        <Route
          exact
          path="/home"
          render={(...props) => (
            <Home name={name} handleClick={handleClick} setName={setName} />
          )}
        />

      </Switch>
    </Router>
  );
};

export default Header;

Home.js：

import React, { Fragment } from "react";

const Home = ({ name, setName, handleClick }) => {
  return (
    <>
      <h1>This is my State: {name}</h1>
      <input type="text" onChange={e => setName(e.target.value)} />
      <button type="Submit" onClick={e => handleClick(e)}>
        Submit
      </button>
    </>
  );
};

export default Home;