病理学NFT并不是简单地把切片图片铸造成数字藏品，而是通过EIP9870标准在链上记录切片来源、染色方法、放大倍数、去标识化等级和访问授权关系。React应用从传统病理信息系统迁移到EIP9870，最大的变化不是UI重写，而是数据获取路径从中心化API转向链上合约调用。下面从合约数据模型、前端分层改造、钱包接入和权限渲染几个方面说明迁移过程。
一、EIP9870病理学NFT的核心数据结构
EIP9870在ERC-721基础上为病理切片增加了一组元数据字段。一个完整的病理学NFT通常会包含标本编号、染色类型、放大倍数、图像哈希、去标识化等级以及去中心化存储地址。这些字段不再由医院的PACS或LIS系统单独维护，而是写入合约或通过tokenURI指向的JSON元数据公开。
合约层需要实现读取元数据URI和权限等级的基本接口。以下是一个最小化的Solidity接口定义，便于在测试环境先部署Mock合约，让React前端可以脱离真实医院数据源进行开发。
interface IERC9870 {
function tokenURI(uint256 tokenId) external view returns (string memory);
function getDeidentificationLevel(uint256 tokenId) external view returns (uint8);
function authorizeViewer(address viewer, uint8 level) external;
function revokeViewer(address viewer) external;
function getViewerLevel(uint256 tokenId, address viewer) external view returns (uint8);
}元数据JSON通常存储在IPFS或Arweave上，一个示例结构如下。注意storageUri指向的是病理切片原始文件，可能是SVS、NDPI等WSI格式，而不是普通图片，前端渲染时需要借助切片查看器或缩略图服务。
{
"specimenId": "SP-2024-0175",
"stainType": "H&E",
"magnification": 40,
"deidentificationLevel": 2,
"imageHash": "bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi",
"storageUri": "ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi/slide.svs"
}去标识化等级是病理学NFT的关键设计。等级0可能表示完全未脱敏，包含患者姓名、住院号等；等级2可能只保留标本编号和染色类型；等级3则仅展示哈希和放大倍数。React组件需要根据当前钱包地址对应的查看等级动态裁剪字段，而不是像传统前端那样由后端接口一次性返回全部数据。
二、迁移前的架构盘点与分层替换
传统React病理应用通常采用三层结构：展示组件、API服务层和病理信息系统。展示组件调用getSlideDetail这类服务函数，服务函数再用axios或fetch请求医院内网的REST接口。由于EIP9870的数据读取依赖链上RPC和用户钱包，如果直接在展示组件里替换数据逻辑，很容易把异步状态和权限判断散落得到处都是。
更稳妥的策略是保留展示组件，只替换数据访问适配器。旧的API服务层可以继续保留为降级方案，但新的EIP9870适配器要提供相同的方法签名，只是内部改为连接合约。下面是一个旧API服务层示例。
export async function getSlideDetail(slideId) {
const response = await fetch(`/api/slides/${slideId}`);
return response.json();
}新的适配器则需要把合约实例传入，并返回统一的SlideDetail结构。这样做的好处是React组件几乎不需要改动，只是数据源切换后需要额外处理错误提示和加载状态。合约返回的tokenId是BigInt类型，如果直接放入React状态，可能在序列化时报错，所以适配器中要提前转换成字符串。
export async function getSlideDetailFromContract(contract, tokenId) {
const uri = await contract.tokenURI(tokenId);
const level = await contract.getDeidentificationLevel(tokenId);
const metadata = await fetchMetadata(uri);
return {
tokenId: tokenId.toString(),
uri,
level: Number(level),
metadata
};
}数据流变化也会影响组件内部的缓存策略。传统REST接口可以在React Query或SWR中缓存，而链上读取需要区分区块确认速度和用户切换钱包地址的情况。如果缓存键只包含tokenId，不同钱包看到的数据可能因为权限不同而错误复用，因此缓存键至少要包含tokenId和当前钱包地址。
三、React中接入EIP9870合约与钱包
接入合约前需要处理浏览器钱包环境。使用ethers.js的BrowserProvider可以包装MetaMask，但如果用户没有安装钱包，或当前站点未获授权，就需要在React状态中给出明确提示。下面是一个自定义Hook，封装单个病理学NFT的加载逻辑。
import { useEffect, useState } from 'react';
import { ethers } from 'ethers';
export function usePathologyNFT(contractAddress, tokenId, abi) {
const [state, setState] = useState({ loading: true, error: null, data: null });
useEffect(() => {
let cancelled = false;
async function load() {
try {
if (!window.ethereum) throw new Error('未检测到钱包插件');
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const contract = new ethers.Contract(contractAddress, abi, signer);
const [uri, level] = await Promise.all([
contract.tokenURI(tokenId),
contract.getDeidentificationLevel(tokenId)
]);
const metadata = await fetchMetadata(uri);
if (!cancelled) {
setState({
loading: false,
error: null,
data: {
tokenId: tokenId.toString(),
uri,
level: Number(level),
metadata
}
});
}
} catch (err) {
if (!cancelled) {
setState({ loading: false, error: err.message || '加载失败', data: null });
}
}
}
load();
return () => { cancelled = true; };
}, [contractAddress, tokenId, abi]);
return state;
}这个Hook通过Promise.all并行请求tokenURI和去标识化等级，减少链上RPC往返次数。cancelled标志用于避免用户快速切换tokenId时旧请求覆盖新状态。值得注意的是，tokenId来自路由参数或列表项时可能仍是字符串，而合约方法通常需要BigInt或Number类型，需要根据ABI定义转换。
事件监听同样重要。如果应用需要展示某个钱包持有的所有病理学NFT，直接遍历tokenId效率很低。正确做法是监听合约的Transfer事件，在本地维护一份索引。React组件挂载时查询历史事件，然后订阅新区块中的事件，这样每次铸造或转移后列表可以自动更新。事件监听器必须在组件卸载时调用removeAllListeners或逐个移除，否则会造成内存泄漏。
四、元数据渲染与去标识化权限处理
从tokenURI得到的通常是一个ipfs://地址，浏览器无法直接请求。需要通过公共网关或私有IPFS节点转换。公共网关存在可用性问题，因此前端最好内置多个网关地址并做失败重试。以下函数演示了基础的网关回退逻辑。
async function fetchMetadata(uri) {
const gateways = ['https://ipfs.io/ipfs/', 'https://cloudflare-ipfs.com/ipfs/'];
if (uri.startsWith('ipfs://')) {
const cid = uri.slice(7);
for (const base of gateways) {
try {
const res = await fetch(base + cid);
if (!res.ok) continue;
return await res.json();
} catch (e) {
continue;
}
}
throw new Error('无法获取病理学NFT元数据');
}
const res = await fetch(uri);
return res.json();
}拉取到元数据后，还需要根据查看权限裁剪字段。EIP9870的getViewerLevel返回一个uint8，前端转换为Number后与字段要求做比较。例如高倍镜切片图只在等级2及以上展示，等级1只展示缩略图和染色类型。这样即使某个地址能看到NFT，也无法获得原始图像哈希或未脱敏信息。
const viewerLevel = Number(await contract.getViewerLevel(tokenId, signer.address)); const canViewSlide = viewerLevel >= 2; const canViewSpecimen = viewerLevel >= 1;
渲染病理切片时要注意WSI文件体积很大，直接在前端加载SVS或NDPI文件并不现实。实际项目中通常从元数据的storageUri生成缩略图地址，或者使用专用的切片服务器。React组件可以只渲染缩略图和基础元数据，当用户点击查看完整切片时再跳转到切片查看器。这样做既控制了首屏性能，也避免因去中心化存储带宽不足导致页面长时间白屏。
五、测试验证与常见迁移陷阱
在真实链上测试病理学NFT成本较高，迁移阶段更适合使用Hardhat本地节点或测试网。Hardhat可以部署EIP9870的Mock合约，并把合约地址和ABI注入React环境变量。前端通过VITE_RPC_URL和VITE_CONTRACT_ADDRESS区分本地、测试网和主网，避免在组件中硬编码地址。
迁移过程中有几个容易踩到的坑。第一个是BigInt在JSON序列化时会抛出异常，所以进入React状态前必须调用toString()。第二个是MetaMask切换网络后，旧合约实例可能仍然返回上一个网络的数据，需要在chainChanged事件中重新创建provider和contract。第三个是tokenURI返回的IPFS地址格式不统一，有的合约返回完整URL，有的返回CID，前端解析时要做兼容。
另一个常见问题是批量查询时gas消耗。如果一次展示几十个病理学NFT，逐个调用tokenURI会导致大量RPC请求。可以考虑在合约中增加批量读取方法，或者前端使用multicall聚合查询。缓存方面，元数据可以存储在IndexedDB中，只对哈希变化的token重新拉取，这样二次进入页面时加载速度会明显提升。
从React应用到EIP9870病理学NFT的迁移，本质上是一次数据主权从中心化系统向链上合约的转移。前端组件仍然可以保持原有交互习惯，但数据层必须重新设计异步模型、权限判断和缓存策略。完成迁移后，病理切片的每一次授权和访问都有链上记录，这对病理会诊、科研协作和患者隐私追溯都有实际价值。