来自数据库onSubmit的表更新

Question

我正在尝试让表更新onSubmit，我已经通过更改加载道具成功将其更新，但是此加载道具仅在第二次提交时更新表，导致数据被我的客户重复（客户两次提交该商品，因为他们认为第一次提交无效。

Index.js

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

import Header from "./components/Header";
import "./style.css";

const App = () => {
  const [comment, setComment] = useState("New Comments Please");
  const [date, setDate] = useState("");
  const [name, setName] = useState("");
  const [load, setLoad] = useState(false);

  // const handleClick = e => {
  //   console.log("Working");
  //   setLoad(true);
  //   console.log(load);
  //   axios
  //     .post(`https://lq-time-tracking.firebaseio.com/user/${name}.json`, {
  //       Name: name,
  //       Comment: comment,
  //       Date: date
  //     })
  //     .then(function(response) {
  //       console.log(response);
  //     })
  //     .catch(function(error) {
  //       console.log(error);
  //     });
  //   setLoad(false);
  // };


  // const user = () => document.getElementById("theDropdown").value;

  return (
    <div>
      <Header
        comment={comment}
        setComment={setComment}
        date={date}
        setDate={setDate}
        setName={setName}
        // handleClick={handleClick}
        load={load}
        setLoad={setLoad}
        // tableData={tableData}
      />
    </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 = ({
  comment,
  setComment,
  selectChanged,
  date,
  setDate,
  setName,
  load,
  setLoad
}) => {
  return (
    <Router>
      <nav className="navbar">
        <Link className="nav-item" to="/home">
          Home
        </Link>
      </nav>
      <Switch>
        <Route
          exact
          path="/home"
          render={(...props) => (
            <Home
              comment={comment}
              setComment={setComment}
              date={date}
              setDate={setDate}
              setName={setName}
              load={load}
              setLoad={setLoad}
            />
          )}
        />
      </Switch>
    </Router>
  );
};

export default Header;

Home.js

import React, { Fragment } from "react";
import { Container, Row, Col } from "reactstrap";

import Form from "./components/FormJr";
import Table from "./components/Table";

const Home = ({ comment, setComment, date, setDate, setName, load, setLoad }) => {
  return (
    <Container>
      <Row>
        <Form
          comment={comment}
          setComment={setComment}
          date={date}
          setDate={setDate}
          setName={setName}
          load={load}
          setLoad={setLoad}
        />
      </Row>
      <Row>
        <Table load={load}/>
      </Row>
    </Container>
  );
};

export default Home;

Form.js

import React from "react";
import { useFormik } from "formik";
import axios from "axios";
const Form = ({ load, setLoad }) => {
  const formik = useFormik({
    initialValues: {
      name: "",
      date: "",
      comment: ""
    },
    onSubmit: values => {
      formik.resetForm();
      setLoad(load !== true ? true : false);
      axios
        .post(`https://lq-time-tracking.firebaseio.com/${name}.json`, values)
        .then(function(response) {})
        .catch(function(error) {
          console.log(error);
        });
    }
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="name">Name</label>
      <select
        id="name"
        name="name"
        type="name"
        onChange={formik.handleChange}
        value={formik.values.name}
      >
        <option value=""> Select One...</option>
        <option value="Ryan">Ryan</option>
        <option value="Patrick">Patrick</option>
        <option value="Jennifer">Jennifer</option>
        <option value="Dan">Dan</option>
      </select>
      <label htmlFor="date">Date</label>
      <input
        id="date"
        name="date"
        type="date"
        onChange={formik.handleChange}
        value={formik.values.date}
      />
      <label htmlFor="comment">Comment</label>
      <input
        id="comment"
        name="comment"
        type="comment"
        onChange={formik.handleChange}
        value={formik.values.comment}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

Table.js

import React, { useEffect, useState } from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import axios from "axios";

const Table = ({ load }) => {
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    axios
      .get("https://lq-time-tracking.firebaseio.com/.json")
      .then(function(response) {
        setTableData(response.data);
      })
      .catch(function(error) {
        console.log(error);
      });
  }, [load]);

  const data = Object.values(tableData ? tableData : []);

  const columns = [
    {
      id: "Name",
      Header: "Name",
      accessor: "name"
    },
    {
      Header: "Date",
      accessor: "date"
    },
    {
      Header: "Comment",
      accessor: "comment"
    }
  ];

  return (
    <ReactTable
      data={data}
      columns={columns}
      pivotBy={["date"]}
      defaultPageSize={10}
      minRows={5}
    />
  );
};

export default Table;