在React中进行重定向操作后如何更新当前数据？

Question

import React, { Component } from "react";
import Header from "components/Headers/Header.jsx";
import Consumer from "../../context";
import {
  Card,
  CardHeader,
  CardFooter,
  DropdownMenu,
  DropdownItem,
  UncontrolledDropdown,
  DropdownToggle,
  Pagination,
  PaginationItem,
  PaginationLink,
  Table,
  Container,
  Row
} from "reactstrap";

class Products extends Component {
  render() {
    return (
      <>
        <Header />
        <Consumer>
          {value => {
            const { products } = value;

            return (
              <Container className="mt--7" fluid>
                <Row>
                  <div className="col">
                    <Card className="shadow">
                      <CardHeader className="border-0">
                        <div className="d-flex justify-content-between">
                          <h3 className="mb-0">
                            <span className="text-info">Products</span>
                          </h3>
                          <a
                            href="/add/addproduct"
                            className="btn btn-outline-success"
                          >
                            <icon className="ni ni-fat-add "></icon>
                          </a>
                        </div>
                      </CardHeader>
                      <Table
                        className="align-items-center table-flush"
                        responsive
                      >
                        <thead className="thead-light">
                          <tr>
                            <th scope="col">
                              <span className="text-info">Prooduct Name</span>
                            </th>
                            <th scope="col">
                              <span className="text-info text-right">*</span>
                            </th>
                            <th scope="col" />
                          </tr>
                        </thead>
                        <tbody>
                          {products.map(product => {
                            return (
                              <tr>
                                <td>
                                  <span className="mb-0 text-sm font-weight-bold">
                                    {product.ProductName}
                                  </span>
                                </td>
                                <td className="text-right">
                                  <UncontrolledDropdown>
                                    <DropdownToggle
                                      className="btn-icon-only text-info"
                                      href="#pablo"
                                      role="button"
                                      size="sm"
                                      color=""
                                      onClick={e => e.preventDefault()}
                                    >
                                      <i className="fas fa-ellipsis-v" />
                                    </DropdownToggle>
                                    <DropdownMenu
                                      className="dropdown-menu-arrow"
                                      right
                                    >
                                      <DropdownItem
                                        href="#pablo"
                                        onClick={e => e.preventDefault()}
                                      >
                                        Delete
                                      </DropdownItem>
                                      <DropdownItem
                                        href="#pablo"
                                        onClick={e => e.preventDefault()}
                                      >
                                        Update
                                      </DropdownItem>
                                      <DropdownItem
                                        href="#pablo"
                                        onClick={e => e.preventDefault()}
                                      >
                                        Go To Page
                                      </DropdownItem>
                                    </DropdownMenu>
                                  </UncontrolledDropdown>
                                </td>
                              </tr>
                            );
                          })}
                        </tbody>
                      </Table>
                      <CardFooter className="py-4">
                        <nav aria-label="...">
                          <Pagination
                            className="pagination justify-content-end mb-0"
                            listClassName="justify-content-end mb-0"
                          >
                            <PaginationItem className="disabled">
                              <PaginationLink
                                href="#pablo"
                                onClick={e => e.preventDefault()}
                                tabIndex="-1"
                              >
                                <i className="fas fa-angle-left" />
                                <span className="sr-only">Previous</span>
                              </PaginationLink>
                            </PaginationItem>
                            <PaginationItem className="active">
                              <PaginationLink
                                href="#pablo"
                                onClick={e => e.preventDefault()}
                              >
                                1
                              </PaginationLink>
                            </PaginationItem>
                            <PaginationItem>
                              <PaginationLink
                                href="#pablo"
                                onClick={e => e.preventDefault()}
                              >
                                2 <span className="sr-only">(current)</span>
                              </PaginationLink>
                            </PaginationItem>
                            <PaginationItem>
                              <PaginationLink
                                href="#pablo"
                                onClick={e => e.preventDefault()}
                              >
                                3
                              </PaginationLink>
                            </PaginationItem>
                            <PaginationItem>
                              <PaginationLink
                                href="#pablo"
                                onClick={e => e.preventDefault()}
                              >
                                <i className="fas fa-angle-right" />
                                <span className="sr-only">Next</span>
                              </PaginationLink>
                            </PaginationItem>
                          </Pagination>
                        </nav>
                      </CardFooter>
                    </Card>
                  </div>
                </Row>
              </Container>
            );
          }}
        </Consumer>
      </>
    );
  }
}
export default Products;

在React项目中添加产品后，我们重定向到列出产品的页面，但是刷新页面之前我添加的最后一个产品未出现在列表中。

import React, { Component } from "react";
import Header from "components/Headers/Header.jsx";
import axios from "axios";
import Consumer from "../../context";
import { withRouter } from "react-router-dom";

class AddProduct extends Component {
  state = {
    ProductName: ""
  };

  validateForm = () => {
    const { ProductName } = this.state;
    if (ProductName === "") {
      return false;
    }
    return true;
  };
  changeInput = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };
  addProduct = async (dispatch, e) => {
    e.preventDefault();

    const { ProductName } = this.state;

    const newProduct = {
      ProductName
    };

    if (!this.validateForm()) {
      this.setState({
        error: true
      });
      return;
    }

    const response = await axios.post(
      "http://localhost:54663/api/product/addproduct",
      newProduct
    );

    dispatch({ type: "ADD_Product", payload: response.data });

    // Redirect
    this.props.history.push("/admin/products", [ProductName]);
  };

  render() {
    const { ProductName } = this.state;
    return (
      <>
        <Header />
        <Consumer>
          {value => {
            const { dispatch } = value;
            return (
              <div className="container mt-4">
                <form onSubmit={this.addProduct.bind(this, dispatch)}>
                  <div className="form-group mt-4">
                    <label htmlFor="exampleInputEmail1">Product Name</label>
                    <input
                      type="text"
                      className="form-control"
                      name="ProductName"
                      id="productName"
                      placeholder="Product Name"
                      value={ProductName}
                      onChange={this.changeInput}
                    />
                  </div>

                  <button type="submit" className="btn btn-primary">
                    Add
                  </button>
                  <a href="/admin/products" className="btn btn-warning">
                    Cancel
                  </a>
                </form>
              </div>
            );
          }}
        </Consumer>
      </>
    );
  }
}
export default withRouter(AddProduct);

然后

我想使用当前页面上的API查看添加到产品表中的数据。 即使现在正在重定向，刷新页面之前我也看不到最后添加的数据。