Javascript 错误：对象作为React子对象无效（找到：具有键{low，high}的对象）

我对编码相当陌生，这是我关于堆栈溢出的第一篇文章。我正在尝试构建一个React应用程序。以下是回购协议：

以下是项目的托管版本（非常早期的阶段）：

有两个组件会导致问题：

NodeDisplay.js

和

EditNode.js

。 这两个组件都呈现所有传入和传出链接的列表（该应用程序是一个图形可视化，当您单击某个节点时，一个侧栏应该显示该节点的内容以及连接到该节点的所有链接的列表）。我知道问题出在这个列表上，因为当我注释掉相应的部分时，事情又开始起作用了。 每当React尝试呈现这些列表中的任何一个时，应用程序就会崩溃，我会收到以下错误：

错误：对象作为React子对象无效（找到：具有键{low，high}的对象）。如果要呈现子对象集合，请改用数组。

NodeDisplay.js（导致问题的部分当前已被注释掉，因此您可以单击托管应用程序中的节点而不会使其崩溃）

从“react icons/md”导入{MdEdit}；
从“uuidv4”导入{uuid}；
导出默认函数NodeDisplay（{currNode，setEditing}）{
如果（currNode.id==“”）{
console.log（“当前未选择任何节点”）；
返回null；
}
返回(
{currNode.title}
设置编辑（真）}>
{currNode.description}
传入链接
{/*

{currNode.inLinks.map（（link）=>(
{link}
))}

传出链接

{currNode.outLinks.map（（链接）=>(
{link}
))}
*/}
);
}

EditNode.js（在这里，列表没有注释掉，因此当您试图编辑节点时，应用程序仍然会崩溃（通过单击小铅笔图标）

从“React”导入React；
从“react”导入{useState}；
从“react icons/md”导入{MdClose}；
从“uuidv4”导入{uuid}；
导出默认函数EditNode({
currNode，
setCurrNode，
设置编辑，
更新图，
createLink，
删除链接，
}) {
const[sourceInput，setSourceInput]=useState（“”）；
const[targetInput，setTargetInput]=useState（“”）；
返回(
编辑节点
设置编辑（错误）}>
{/*标题和说明*/}
标题
setCurrNode（{…currNode，标题：e.target.value}）
}
>
描述
setCurrNode（{…currNode，描述：e.target.value}）
}
>
{/*链接*/}
{/*传入链接*/}
传入链接
来源
setSourceInput（e.target.value）}
>
createLink（sourceInput，currNode.id）}
>
连接

{currNode.inLinks.map（（link）=>{
返回(

{link}
removeLink（链接，currNode.id）}
>
去除

);
})}

{/*传出链接*/}
传出链接
目标
setTargetInput（e.target.value）}
>
createLink（currNode.id，targetInput）}
>
连接

{currNode.outLinks.map（（链接）=>{
返回(

{link}
removeLink（currNode.id，link）}
>
去除

);
})}

{/* 
拯救
*/}
);
}

关于此错误还有其他堆栈溢出问题，但是阅读答案没有帮助，因为我仍然不理解这个问题，也不理解需要进行哪些更改来修复它。我希望我不会因为再次询问我的具体案例而成为麻烦

---

任何帮助都将不胜感激。

在我的情况下，将

{link}

更改为

{link.low}

可以消除错误，因为这些点直接对孩子做出反应

令人困惑的是，

link

不应该有任何称为

low

或

high

的属性。软管来自于neo4j的javascript驱动程序的某个问题，它不能很好地处理整数。在后端，必须更改

const nodes = nodesResult.records.map((r) => {
    return {
      id: r.get("id").toNumber(),
      inLinks: r.get("inLinks"),
      outLinks: r.get("outLinks"),
      title: r.get("title"),
      description: r.get("description"),
    };
  });

到

注意，我添加了

.map（（inLink）=>inLink.toNumber（））

和

.map（（outLink）=>outLink.toNumber（））

这解决了问题，到达前端的数据现在是我所期望的（即

内链接的and数组和
外链接的数组），而不是带有h键的对象
高：
和<
import React from "react";
import { useState } from "react";
import { MdClose } from "react-icons/md";
import { uuid } from "uuidv4";

export default function EditNode({
  currNode,
  setCurrNode,
  setEditing,
  updateGraph,
  createLink,
  removeLink,
}) {
  const [sourceInput, setSourceInput] = useState("");
  const [targetInput, setTargetInput] = useState("");

  return (
    <div className="mt-4">
      <div className="flex items-center space-x-2 text-lg">
        <>
          <h3>Edit Node</h3>
        </>
        <>
          <button onClick={() => setEditing(false)}>
            <MdClose></MdClose>
          </button>
        </>
      </div>
      <form className="mt-4">
        {/* title and description */}
        <>
          <label className="label" htmlFor="title">
            Title
          </label>
          <>
            <input
              className="w-full input"
              type="text"
              id="title"
              placeholder="Title"
              value={currNode.title}
              onInput={(e) =>
                setCurrNode({ ...currNode, title: e.target.value })
              }
            ></input>
          </>
          <>
            <label className="label" htmlFor="description">
              Description
            </label>
            <>
              <textarea
                className="w-full input"
                rows="5"
                id="description"
                placeholder="Description"
                value={currNode.description}
                onInput={(e) =>
                  setCurrNode({ ...currNode, description: e.target.value })
                }
              ></textarea>
            </>
          </>
        </>
        {/* links */}
        <>
          {/* incoming links */}
          <div className="mt-4">
            <h4>Incoming Links</h4>
            <>
              <label className="label" htmlFor="createInLink">
                Source
              </label>
              <div className="inline-flex space-x-1">
                <input
                  className="input"
                  type="text"
                  id="createInLink"
                  placeholder="Source node ID"
                  value={sourceInput}
                  onInput={(e) => setSourceInput(e.target.value)}
                ></input>
                <>
                  <button
                    className="btn"
                    type="button"
                    onClick={() => createLink(sourceInput, currNode.id)}
                  >
                    Connect
                  </button>
                </>
              </div>
            </>
            <ul>
              {currNode.inLinks.map((link) => {
                return (
                  <li key={uuid()}>
                    <span>{link}</span>
                    <button
                      className="btn"
                      type="button"
                      onClick={() => removeLink(link, currNode.id)}
                    >
                      Remove
                    </button>
                  </li>
                );
              })}
            </ul>
          </div>
          {/* outgoing links */}
          <div className="mt-4">
            <h4>Outgoing Links</h4>
            <>
              <label className="label" htmlFor="createOutLink">
                Target
              </label>
              <div className="inline-flex space-x-1">
                <>
                  <input
                    className="input"
                    type="text"
                    id="createOutLink"
                    placeholder="Target node ID"
                    value={targetInput}
                    onInput={(e) => setTargetInput(e.target.value)}
                  ></input>
                </>
                <>
                  <button
                    className="btn"
                    type="button"
                    onClick={() => createLink(currNode.id, targetInput)}
                  >
                    Connect
                  </button>
                </>
              </div>
            </>
            <ul>
              {currNode.outLinks.map((link) => {
                return (
                  <li key={uuid()}>
                    <span>{link}</span>
                    <button
                      className="btn"
                      type="button"
                      onClick={() => removeLink(currNode.id, link)}
                    >
                      Remove
                    </button>
                  </li>
                );
              })}
            </ul>
          </div>
          {/* <button className="btn" type="button" onClick={updateGraph}>
            Save
          </button> */}
        </>
      </form>
    </div>
  );
}

const nodes = nodesResult.records.map((r) => {
    return {
      id: r.get("id").toNumber(),
      inLinks: r.get("inLinks"),
      outLinks: r.get("outLinks"),
      title: r.get("title"),
      description: r.get("description"),
    };
  });

const nodes = nodesResult.records.map((r) => {
    return {
      id: r.get("id").toNumber(),
      inLinks: r.get("inLinks").map((inLink) => inLink.toNumber()),
      outLinks: r.get("outLinks").map((outLink) => outLink.toNumber()),
      title: r.get("title"),
      description: r.get("description"),
    };
  });