如何在 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
      }
]