React中useState存储WebSocket返回对象渲染报错如何解决？

• 核心触发点：React 不支持直接将对象类型的值作为子元素渲染，你代码里{object[objKey]}对应的值是对象时就会抛出该错误。
• 结合你给出的 WebSocket 返回结构{Snapshot: {Name: "AppInfo", DataHeader: Array(24), Data: Array(47)}}，遍历object的key时会拿到Snapshot，对应的object[objKey]就是嵌套的对象，直接放在<p>标签内渲染就触发了报错。
• 隐性问题：你初始化object状态时用了空字符串""，和后续存储对象的类型不匹配，建议初始值改为空对象{}避免后续潜在的类型错误。

场景1：仅调试时快速展示对象内容 #

直接把对象转为JSON字符串渲染即可，修改遍历部分的代码：

{Object.keys(object).map((objKey, index) => (
    <div key={index}>
      <p> {objKey} : {JSON.stringify(object[objKey], null, 2)}</p>
    </div>
))}

场景2：业务场景下按结构渲染属性值 #

逐层读取对象的基础类型属性渲染即可，修改后的完整代码参考：

const client = new W3CWebSocket("ws://QWERTY:9080/user");

export default function App() {
  // 初始值改为空对象
  const [object, setObject] = useState({}); 
   
  useEffect(() => {
    client.onopen = () => {
      console.log("Connected");
    };

    client.onmessage = (e) => {
      const newObj = JSON.parse(e.data); 
      setObject(newObj);
      console.log(newObj);        
    };

    client.onclose = () => {
      console.log("Closed...");
    };

    return () => {}
  }, [])  


  return (
    <div className="App">
      <Navbar />
      {/* 按需读取层级属性渲染 */}
      {object.Snapshot && (
        <>
          <p>Name: {object.Snapshot.Name}</p>
          <div>
            <h4>DataHeader:</h4>
            {object.Snapshot.DataHeader.map((item, idx) => (
              <span key={idx}>{item} </span>
            ))}
          </div>
          {/* Data数组可根据业务需求自行实现渲染逻辑 */}
        </>
      )}
      <DataTable object = { object } />
   </div>
  );
}

注意：如果DataTable组件内部也存在直接渲染对象的逻辑，也需要同步修改对应渲染代码避免同样报错。

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