无法使用Stacksjs包从React应用程序中的userSession.loadUserData()获取.bns名称

Question

我正在用Clarity智能合约语言和前端的Stacksjs为Stacks区块链构建一个应用程序。在我的React UI中，我无法从userSession对象中获取.bns名称。根据我的研究，它应该在userSession.loadUserData().username下。

以下是代码片段：

import { AppConfig, UserSession, showConnect } from "@stacks/connect";
import { Person } from "@stacks/profile";
import { Storage } from "@stacks/storage";
import appIcon from "./assets/app_logo.png";
const appConfig = new AppConfig(["store_write", "publish_data"]);
export const userSession = new UserSession({ appConfig });
export const storage = new Storage({ userSession });
console.log(userSession.loadUserData());

Answer 1

username属性最近被弃用，取而代之的是让应用程序处理检索BNS名称。您可以使用这个示例文件来查看如果您有用户地址，如何提取BNS名称。

import { StacksMainnet } from '@stacks/network';
import { fetchPrivate } from '@stacks/common';
import { AppConfig, UserSession, showConnect } from '@stacks/connect';
import { Person } from '@stacks/profile';
const appConfig = new AppConfig(['store_write', 'publish_data']);
export const userSession = new UserSession({ appConfig });
export function authenticate() {
showConnect({
appDetails: {
name: 'Todos',
icon: window.location.origin + '/logo.svg',
},
redirectTo: '/',
onFinish: () => {
window.location.reload();
},
userSession: userSession,
});
}
export function getUserData() {
return userSession.loadUserData();
}
export function getPerson() {
return new Person(getUserData().profile);
}
export const network = new StacksMainnet();
export const fetchFirstName = async (address, network) => {
try {
const namesResponse = await fetchPrivate(
`${network.bnsLookupUrl}/v1/addresses/stacks/${address}`
);
const namesJson = await namesResponse.json();
if ((namesJson.names.length || 0) > 0) {
return namesJson.names[0];
}
} catch (e) {}
return undefined;
};

这是从Hiro的示例Todo应用程序中的这个提交中提取的，尽管它看起来已经被删除了。

https://github.com/hirosystems/todos/pull/104/files#diff-41aaffe0a6b7fb309928aa1e15b50b58bc3348249614110efe07cf89da61c7a2