React中正确使用FingerprintJS：如何更新app_visitorId并渲染

你当前的问题是用了普通变量app_visitorId，异步操作完成后赋值给它，但React不会因为普通变量的变化重新渲染组件，所以页面始终显示初始值。要解决这个问题，需要使用React的状态管理和副作用处理钩子，具体修改步骤如下：

1. 引入必要的React钩子 #

首先在组件文件顶部引入useState和useEffect：

import { useState, useEffect } from 'react';

2. 替换普通变量为状态变量 #

用useState定义一个状态变量来存储visitorId，替代原来的普通变量：

const [appVisitorId, setAppVisitorId] = useState('Is not defined still');

3. 用useEffect执行异步逻辑 #

把获取FingerprintJS的异步逻辑放到useEffect中，确保组件挂载后只执行一次，并在拿到结果后更新状态：

完整修改后的代码 #

function App() {
  const [appVisitorId, setAppVisitorId] = useState('Is not defined still');

  useEffect(() => {
    const fetchVisitorId = async () => {
      const fp = await fpPromise;
      const result = await fp.get();
      const visitorId = result.visitorId;
      const confidence = result.confidence;
      
      console.log(
        '----------------------------------------------------------\n' +
        'fingerprintjs@ visitorId: ' + visitorId + '\n' +
        'fingerprintjs@ confidence: ' + confidence.score.toPrecision(6) + '\n' +
        '----------------------------------------------------------\n'
      );
      
      // 更新状态，触发组件重新渲染
      setAppVisitorId(visitorId);
    };

    fetchVisitorId();
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  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/>
          {appVisitorId}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

关键说明 #

• 状态变量：React只有在状态（通过useState定义）更新时才会重新渲染组件，普通变量的变化不会触发渲染，所以必须用状态变量来存储visitorId。
• useEffect的作用：useEffect用于处理组件的副作用（比如异步请求），空依赖数组[]表示这个副作用只会在组件首次挂载时执行一次，避免重复请求FingerprintJS。
• 异步函数封装：把异步逻辑封装成单独的函数fetchVisitorId，让代码结构更清晰，也符合React的代码规范。

内容的提问来源于stack exchange，提问作者Joe Dudinski