更改后使用新数据渲染页面

Question

我在“产品/添加”上有一个表格，并将产品添加到数据库中，提交请求后，我重定向到显示所有产品的页面。但是，此页面不显示有关我添加的最后一项的信息。如何解决？重定向后如何显示页面以显示最新数据？

'localhost：3333 / products / add'

import React,  {useState} from 'react';
import api from './api';
import { Redirect } from 'react-router'

const HandleProduct = () => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [redirect, setRedirect] = useState(false);

  const updateName = (e) =>{
    setName(e.target.value);
  }
  const updateDescription = (e) =>{
    setDescription(e.target.value);
  }
  const addProduct = (e) =>{
    e.preventDefault();
    const product = {
      name: name,
      description: description
    }
    api.addProduct(product)
    .then((req, res) =>{
      console.log(res);
      setRedirect(true);
    })
  }
  if(redirect) {
    return <Redirect to={'/products'} />
  }
return (
    <div>
        <form onSubmit={addProduct}>
            <input type="text" name="name" value={name} onChange={updateName}/>
            <input type="text" name="description" value={description} onChange={updateDescription}/>
            <button>Submit</button>
        </form>
    </div>
  );
}
export default HandleProduct;

产品列表（本地主机：3333 / products）：

import React, {useContext} from 'react';
import {ProductsContext} from './ProductsContext';

const ProductsList = () => {
  const [data] = useContext(ProductsContext);
  return (
    <div>
      {console.log(data)}
        {data.products.map((product, index)=>(
            <div key={index}>
                <p>{product.name}</p>
                <p><i>{product.description}</i></p>
            </div>
        ))}
    </div>
  );
}
export default ProductsList;