正确使用FingerprintJS

Question

我还没有React.js的经验，但我想用FingerprintJS编写一些应用程序。

function App() {
let app_visitorId = 'Is not defined still';
(async () => {
// Get the visitor identifier when you need it.
const fp = await fpPromise
const result = await fp.get()
// This is the visitor identifier:
const visitorId = result.visitorId;
const confidence = result.confidence;
console.log(
'----------------------------------------------------------n' +
'fingerprintjs@ visitorId: ' + visitorId + 'n' +
'fingerprintjs@ confidence: ' + confidence.score.toPrecision(6) + 'n' +
'----------------------------------------------------------n');
})();
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.<br/>
{app_visitorId}
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

我的问题是：如何更改"app_visitorId"let以在渲染块中渲染其值？谢谢你！

Answer 1

从useEffect挂钩，使用setState将vistitorId存储到状态。在render(返回函数(中，检查状态变量是否已经填充，因为返回的值来自异步promise。如果是，请渲染visitorId。

您可以在GitHub上使用Next.js检查更复杂的代码解决方案(但概念与React相同(。或者，可以查看Fingerprint Pro的React库。

Answer 2

我下载了fingerprint v3，然后按如下方式使用：

import fpPromise from "./fingerpintv3";
// Get the visitor identifier when you need it.
const fp = fpPromise.load();
fp
.then((fp: any) => fp.get())
.then((result: any) => {
const visitorId = result.visitorId;
console.log('fingerprint: ', visitorId);
})
.catch((error: any) => {
console.error(error);
});