在新的 html 页面中显示 API 响应

Question

我在这里做错了什么？我正在尝试使用来自 API 响应 的数据。我希望我的 React 应用程序打开一个新的 Window、页面或除同一页面之外的任何内容。然后显示它从这个 API 获得的数据。 请各位初级开发者多多举例学习。我们都知道技术术语比编写实际代码更难。

如果您想在 POSTMAN 中测试 API：

令牌：fb83b937-2739-3d6e-9519-09387b92dfae API: https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/checkout/

请用在你的身上：

{
  "transactionReference": "string",
  "paymentMethod": "CreditCard",
  "checkoutOrderUrl": "http://www.test.com/",
  "user": {
    "name": "string",
    "msisdn": "+27610983142",
    "email": "test@test.com"  },
  "payementMethodDetail": {
    "RedirectUrl": "http://www.test.com",
    "PurchaseEventWebhookUrl": "http://www.test.com"  },
  "bundle": [
    {
      "ProductCode": "317",
      "Amount": 5000,
      "CurrencyCode": "ZAR",
      "Quantity": 1    }
  ]
}

这是我目前的解决方案：当用户单击“立即付款”时，我正在执行 POST 请求。只有当用户这样做时，我才需要显示加载消息并在新的 window/page/path.

中显示结果

  const handleSubmit = async () => {
    const token = "fb83b937-2739-3d6e-9519-09387b92dfae";
    const data = {
      transactionReference: "string",
      paymentMethod: "CreditCard",
      checkoutOrderUrl: "http://www.test.com/",
      user: {
        name: name, 
        msisdn: phone, 
        email: email, 
      },
      payementMethodDetail: {
        RedirectUrl: "http://www.test.com",
        PurchaseEventWebhookUrl: "http://www.test.com",
      },

      bundle: cart.map((item) => ({
        ProductCode: `${item.ProductCode}`,
        Amount: item.amount,
        CurrencyCode: item.currencyCode,
        Quantity: item.quantity,
      })),
    };
    const requestOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify(data),
    };
    await fetch(
      "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/checkout/",
      requestOptions
    )
      .then((response) => response.json(),
      console.log("Data Sent")
      )
      .then((res) => { 
        Navigate(<Payment/>, {state: res})
      });
  };

感谢那些愿意提供帮助的人。

Answer 1

问题

根据我对您问题的理解，您希望导航到呈现具有指定响应负载的 Payment 组件的路由。问题是您不能从这样的回调函数 return Navigate 组件并期望它影响 UI 中的任何更改。 Navigate 组件要么需要作为组件结果的一部分呈现，要么需要作为命令式导航操作呈现。

解决方案

导入并使用 useNavigate 挂钩访问 navigate 函数，并在路由状态下使用 POST 响应数据发出命令式导航。

示例：

import { useNavigate } from 'react-router-dom';

...

const navigate = useNavigate();

...

const handleSubmit = async () => {
  ...
  await fetch(
    "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/checkout/",
    requestOptions
  )
    .then((response) => response.json())
    .then((payment) => { 
      navigate("/confirmation", { state: { payment } });
    });
};

创建渲染 Payment 组件的路由：

<Routes>
  ... other routes ...
  <Route path="/confirmation" element={<Payment />} />
  ...
</Routes>

在 Payment 组件中使用 useLocation 挂钩访问传递的路由状态。

import { useLocation } from 'react-router-dom';

...

const Payment = () => {
  const { state } = useLocation();
  const { payment } = state || {};

  ...
};

在新的 html 页面中显示 API 响应

Displaying the API response in a new html page

javascript

reactjs

react-router

react-router-dom

react-hooks

问题

解决方案