React中如何从Gun.js获取数据，遇对象无法作为React子元素报错怎么解决

• Gun.js返回的data是带内部私有元属性_的包装节点对象，并非纯业务数据对象。
• 你在业务代码中将该原始Gun对象直接作为内容渲染到了JSX中，React不支持直接渲染普通对象作为子元素，因此抛出对应错误。
• 额外注意：你给出的示例代码仅做了控制台打印，实际触发报错的是你JSX渲染部分的逻辑。

核心处理逻辑 #

1. 拿到Gun返回的数据后先过滤私有_属性，得到纯业务对象
2. 把处理后的纯数据存入React状态，不要直接存储Gun原始节点对象
3. 渲染时仅读取具体的基础类型属性（字符串、数字等），不要直接渲染整个对象
4. 组件卸载时取消Gun的事件监听，避免内存泄漏和无效更新

代码示例 #

import { useEffect, useState } from 'react';
// 替换为你项目中Gun实例的引入路径
import gun from './gun';

function MessageList() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // 保存监听的取消方法
    const unsubscribe = gun.get("messages").map().on((data, id) => {
      // 过滤空数据
      if (!data) return;
      // 剔除Gun的私有元属性
      const { _, ...pureData } = data;
      const newMessage = {
        id,
        ...pureData
      };
      // 更新状态时做去重处理，避免同id数据重复添加
      setMessages(prevList => {
        const existIndex = prevList.findIndex(item => item.id === id);
        if (existIndex !== -1) {
          const newList = [...prevList];
          newList[existIndex] = newMessage;
          return newList;
        }
        return [...prevList, newMessage];
      });
    });

    // 组件卸载时取消监听
    return () => unsubscribe();
  }, []);

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>
          {/* 仅渲染具体的属性值，不要直接渲染整个msg对象 */}
          <h3>{msg.title}</h3>
        </div>
      ))}
    </div>
  );
}

校验调试方法 #

如果需要确认数据结构，可通过以下方式打印纯业务数据，避免Gun的私有属性干扰调试：

console.log(JSON.parse(JSON.stringify(data)))

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