我正在开发一个带有登录页面和主页的应用程序。在我的主页中，我有一个组件 A，它接受请求并将其发布到 nodejs 服务器，该服务器在数据库上更新它。另一个组件 B 从数据库中获取数据并显示它。我希望能够在组件 A 的请求与响应一起返回时重新呈现组件 B。

我知道我可以创建一个虚拟状态变量并将其传递给 B 并将一个 prop 函数传递给 A 以允许它更改它，但是有没有更有效的方法来做到这一点？

A 的获取请求的代码：

const onSubmit = async (event) => {
    event.preventDefault();

    if (vendor === "" || amount === "") {
    } else {
      const res = await axios.post(`http://localhost:4000/newpayment`, {
        vendor,
        amount,
      });
      // want to check res and rerender component B
    }

    setVendor("");
    setAmount("");
  };

组件 B 的代码：

import React, { useState, useEffect } from "react";
import axios from "axios";

const ComponentB= () => {
  const [payments, setPayments] = useState([]);

  const fetchPayments = async () => {
    const res = await axios.get(`http://localhost:4000/paymentspending`);

    setPayments(res.data);
  };

  useEffect(() => {
    fetchPayments();
  }, []);

  const onClick = async (id) => {
    await axios.post(`http://localhost:4000/markpaid`, { id });
    fetchPayments();
  };

  const renderedPayments = Object.values(payments).map((payment) => {
    return (
      <div
        className="card"
        style={{ width: "100%", marginBottom: "20px" }}
        key={payment.id}
      >
        <div className="card-body">
          <h4>{payment.vendor}</h4>
          <h5>{payment.amount}</h5>
          <button
            className="btn btn-success"
            onClick={() => onClick(payment.id)}
          >
            Mark as Paid
          </button>
        </div>
      </div>
    );
  });

  return <div className="d-flex flex-row flex-wrap">{renderedPayments}</div>;
};

export default ComponentB;