如何在 next.js 中顯示鏈接到登錄用戶錢包地址的 json 文件中的數據？

Question

我正在嘗試在 next.js 中創建一個聲明頁面，該頁面將允許登錄的元掩碼地址：

1. 在本地讀取 .json 文件中提供的數據，以查看該帳戶是否有資格認領該物品並呈現認領頁面
2. 在提交表單以寫入 .json 說明該項目已被認領。

我使用本教程來了解如何連接到元掩碼帳戶： https ://medium.com/@prodmxle/adding-metamask-authentication-in-next-js-application-using-the-thirdweb-9d23e9147496

除了樣式我的項目目前看起來與教程中的代碼相同。

.json：

{
"wallets": [
  {
    "wallet": "YOUR_ROPSTEN WALLET1",
    "tokenAmount": 44,
    "hasPizza": true,
    "hasCoffee": false,
    "hasBurger": false,
    "hasClaimed": false
  },
  {
    "wallet": "YOUR_ROPSTEN WALLET2",
    "tokenAmount": 2,
    "hasPizza": false,
    "hasCoffee": false,
    "hasBurger": false,
    "hasClaimed": true
  },
  {
    "wallet": "YOUR_ROPSTEN WALLET3",
    "tokenAmount": 4,
    "hasPizza": false,
    "hasCoffee": false,
    "hasBurger": false,
    "hasClaimed": true
  } 
]

}

Answer 1

學習 nextJS 中的 api 特性，很簡單，這里就不多說了。 由於您擁有用戶的數據，您可以發送帶有用戶 ID 的 api 請求，並且在 api 端，您可以過濾並僅返回該用戶的數據。

或者

由於您有一個非常小的數據庫並假設它已經被托管或導入並且您在要顯示的組件中擁有數據

const userId="YOUR_ROPSTEN WALLET1"
const user= data.filter(user=> user.wallet===userId);

現在用戶看起來像這樣

[
    {
        "wallet": "YOUR_ROPSTEN WALLET1",
        "tokenAmount": 44,
        "hasPizza": true,
        "hasCoffee": false,
        "hasBurger": false,
        "hasClaimed": false
      }
]