React中如何在return()内访问对象并将其作为props传递给组件

报错根因 #

你遇到的Object is not a React Child报错和传递props无关，问题出在React不允许直接将普通对象作为子元素渲染到JSX中：

• 你将newObj作为props传递给<DataTable />的操作本身完全合法，子组件拿到后可以直接访问对象的所有属性
• 报错仅来自<pre>{ object }</pre>这行代码，你把对象直接放在JSX的{}中触发了渲染规则校验

解决方案 #

方案1：仅需要在页面预览完整对象结构 #

如果只是调试预览用，仅在打印的位置用JSON.stringify格式化即可，不会影响原对象传递给其他组件，完全不阻碍你后续访问对象属性：

return (
    <div className="App">
      <Navbar />
      {/* 仅打印时做格式化，第三个参数2代表缩进2空格，可读性更高 */}
      <pre>{JSON.stringify(newObj, null, 2)}</pre>
      {/* 传给子组件的还是未处理的原对象，子组件可直接访问属性 */}
      <DataTable object={newObj} />
    </div>
);

方案2：需要渲染对象的指定属性 #

如果你不想转字符串，直接取出对象的属性值渲染即可：

// 示例：假设newObj包含name、id、dataList三个属性
return (
    <div className="App">
      <Navbar />
      <pre>
        名称：{newObj.name}
        ID：{newObj.id}
        数据条数：{newObj.dataList?.length || 0}
      </pre>
      <DataTable object={newObj} />
    </div>
);

注意事项 #

要提前给newObj设置初始值，避免websocket推送前对象为undefined，子组件访问属性时报错，示例代码如下：

import { useState, useEffect } from 'react';

function App() {
  // 初始值设为空对象
  const [newObj, setNewObj] = useState({});

  useEffect(() => {
    const ws = new WebSocket('你的websocket地址');
    ws.onmessage = (e) => {
      const data = JSON.parse(e.data);
      setNewObj(data);
    };
    // 组件卸载时关闭连接
    return () => ws.close();
  }, []);

  return (
    <div className="App">
      <Navbar />
      <pre>{JSON.stringify(newObj, null, 2)}</pre>
      <DataTable object={newObj} />
    </div>
  );
}

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