如何在同一页面上将数据从一个端点传递到另一个端点

Question

我正在尝试根据从用于创建钱包的端点返回的钱包 id 显示钱包的交易，但未能将钱包 id 传递给第二个端点以供使用。 下面是代码，非常感谢任何有关如何安排我的代码然后传递钱包 ID 的帮助。

import React, {Component} from "react";
import { Link } from "react-router-dom";


class Dashboard extends Component {
  state = {
    wallets: [],
    transactions: [],
  }

  componentDidMount() {
    const temp = localStorage.getItem("data")
    const loadedData = JSON.parse(temp)
    const token = "Bearer " + loadedData.token
    const userId = {
      "user_id": loadedData.user_id
    }
    const requiredOptions1 = {
      method: "POST",
      headers: {
        "Authorization": token,
        "Content-Type": "application/json"
      },
      body: JSON.stringify(userId),
    }
    fetch("http://127.0.0.1:9000/user_wallet_details", requiredOptions1)
    .then((response) => response.json())
    .then(res => {
      console.log(res)
      this.setState({ wallets: res });
    });


    const walletId = {
      "wallet_id": wallet_id
    }
    const requiredOptions = {
      method: "POST",
      headers: {
        "Authorization": token,
        "Content-Type": "application/json"
      },
      body: JSON.stringify(walletId),
    }
    fetch("http://127.0.0.1:9000/transaction_base_on_wallet", requiredOptions)
    .then((response) => response.json())
    .then(res => {
      console.log(res)
      
    });


  }

Answer 1

我建议你使用 useParams() 来解决这个问题。 只需在链接路径中传递 walletID。 并使用第二页上的 useParams() 从 url 中提取钱包 ID。

例如：- 在第一页上传递路径中的参数，如<Link to=`/resultPage/${walletID}`>Click Me</Link>

在结果页面上，使用const walletID = useParams();提取 walletID

要从 Path 中提取变量，请将 Route 路径声明为<Route path="/resultPage/:walletID" element="<HomePage />" />