【p2p、分布式，区块链笔记 DAM】UserList.js & UserInfo.js

• 数据在Login.js的 用户注册成功后的处理 (onCreateSuccess) 放入数据库。
• 下面的代码实现读取并通过map()进行遍历展示:

import React, {
   
    useState, useEffect } from 'react';

import useGunContext from './useGunContext';

const APP_PUBLIC_KEY = process.env.APP_PUBLIC_KEY;

const UserList = () => {
   
   
  const {
   
    getGun } = useGunContext();
  const [users, setUsers] = useState({
   
   });

  useEffect(() => {
    getGun()
      .get(`~${APP_PUBLIC_KEY}`) 
      .get('profiles')// 进一步访问 profiles 节点，通常用于存储所有用户的个人资料数据
      .map()  // map() 方法会遍历 profiles 节点下的所有子节点，并对每个子节点执行接下来的 on() 回调函数,  map() 方法类似于 JavaScript 的 forEach()，但它是实时的。当 profiles 节点下的任何数据发生变化时，map() 会自动触发更新。
      .on((profile, pub) => {
        setUsers((users) => ({
          ...users,
          [pub]: profile,
        }));
      });
  }, []);

  return (
    <div>
      <ul>
        {
   
   Object.entries(users).map(([pub, user]) => (
          <li key={pub}>
            {user.displayName} ({user.username})
          </li>
        ))}
        {
   
   console.log(`~$