对象作为 React 子级无效（找到：[object HTMLDivElement]）。如果您打算渲染一组孩子，请改用数组答案

【问题标题】：Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead对象作为 React 子级无效（找到：[object HTMLDivElement]）。如果您打算渲染一组孩子，请改用数组
【发布时间】：2021-09-28 05:14:48
【问题描述】：

您好，我目前在我的 React Web 应用程序中遇到错误。

“对象作为 React 子对象无效（找到：[object HTMLDivElement]）。如果您要呈现子对象集合，请改用数组。”

我知道发生此错误是因为我试图使用 ReactDOM 将对象（我不确定是哪种类型。HTML？）呈现到 DIV 标记中，如下所示。

        // Get display div from document
    var display = document.getElementById("display");

    // Instantiate client, using an WebSocket tunnel for communications.
    var ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
    var ws_path = ws_scheme + '://' + window.location.host + '/ws/';

    var guac = new Guacamole.Client(
        new Guacamole.WebSocketTunnel(ws_path)
    );

    // Add client to display div
    var guacDisplay = guac.getDisplay().getElement()
    reactDom.render(guacDisplay, display);

当记录我试图渲染的对象（guacDisplay）时，I see the following object in the console.

如何解决此错误？提前致谢。

【问题讨论】：

如果您尝试在 UI (HTML) 中显示对象，则会出现此错误。
您似乎正在将 React 与纯 JS/HTML 混合使用。
要求澄清，不要冒犯：你知道 HTML 和 JSX 之间的区别吗？
哦，没有冒犯。这是我第一个使用 JSX 的项目，所以我对它还不是很熟悉。我所知道的是 JSX 允许我在我的 Javascript 代码中输入 HTML 标签。
我在这里猜测一下，因为我不知道 Guacamole 是什么，但看起来您正在传递 ReactDOM.render 一个 DOM 元素，而不是 React 元素。它们不一样，它必须是一个 React 元素。如果我是正确的，我想知道你是否真的需要为此做出反应，因为让它工作的唯一方法 (dangerouslySetInnerHTML) 会首先否定使用 React 的任何好处。

标签： javascript html reactjs jsx react-dom

【解决方案1】：

如果您尝试将对象/数组显示到 HTML 元素（反应中的 JSX 元素），则会发生此错误。

const obj={
    name: 'john',
    age: 21
}

如果你想在 UI 中显示 obj，你需要像 obj.name 或 obj.age 一样显示

如果你直接这样使用

<div>{obj}</div>

会抛出错误。

【讨论】：

我能问一下您所说的“将通过错误”是什么意思吗？
好的，我已经尝试过了。现在，除了我最初的错误之外，我还遇到了这个“考虑在你的树中添加一个错误边界来自定义错误处理行为。”。我真的很感激帮助，尽管它没有用。还有什么我可以尝试的吗？