时间戳

首页 > 解决方案 > 错误：对象作为 React 子对象无效（找到：带有键 {low, high} 的对象）

javascript - 错误：对象作为 React 子对象无效（找到：带有键 {low, high} 的对象）

问题描述

我对编码很陌生，这是我在 Stack Overflow 上的第一篇文章。我正在尝试构建一个 React 应用程序。这是回购： https ://github.com/Amaro-Koberle/k-net/

这是该项目的托管版本（非常早期阶段）： https ://quizzical-edison-523c55.netlify.app/

有两个组件会导致问题：NodeDisplay.js和EditNode.js. 这两个组件都呈现所有传入和传出链接的列表（该应用程序是图形可视化，当您单击节点时，侧边栏应该显示节点的内容以及连接到它的所有链接的列表）。我知道问题出在这个列表上，因为当我将相应的部分注释掉时，事情又开始起作用了。每当 React 尝试渲染这些列表中的任何一个时，应用程序都会崩溃并且我会收到以下错误： Error: Objects are not valid as a React child (found: object with keys {low, high}). If you meant to render a collection of children, use an array instead.

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

import { MdEdit } from "react-icons/md";
import { uuid } from "uuidv4";

export default function NodeDisplay({ currNode, setEditing }) {
  if (currNode.id === "") {
    console.log("No node is currently selected");
    return null;
  }

  return (
    <div className="mt-4">
      <div className="flex items-center space-x-2 text-lg">
        <h3>{currNode.title}</h3>
        <button className="edit-button" onClick={() => setEditing(true)}>
          <MdEdit></MdEdit>
        </button>
      </div>
      <div className="mt-4">
        <p className="text-sm">{currNode.description}</p>
        <div>
          <div className="mt-4">
            <h5>Incoming Links</h5>
            {/* <ul>
              {currNode.inLinks.map((link) => (
                <li key={uuid}>{link}</li>
              ))}
            </ul>
          </div>
          <div className="mt-4">
            <h5>Outgoing Links</h5>
            <ul>
              {currNode.outLinks.map((link) => (
                <li key={uuid}>{link}</li>
              ))}
            </ul> */}
          </div>
        </div>
      </div>
    </div>
  );
}

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

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>
  );
}

关于此错误还有其他 Stack Overflow 问题，但阅读答案并没有帮助，因为我仍然不明白这个问题，我不明白需要进行哪些更改来修复它。关于我的具体情况，我希望我不会再次询问，以免造成麻烦。

任何帮助将不胜感激。

标签： javascriptreactjstailwind-css

解决方案

在我的情况下，改变<span>{link}</span>以<span>{link.low}</span>摆脱错误，因为这些点直接对孩子做出反应。

令人困惑的是，link它不应该有任何名为lowor的属性high。软管来自neo4j的javascript驱动程序h的一些问题，它不能很好地处理整数。在后端，不得不改变

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"),
    };
  });

注意我添加了.map((inLink) => inLink.toNumber())and .map((outLink) => outLink.toNumber())。

这解决了这个问题，到达前端的数据现在是我所期望的（即数组 forinLinks和数组 for outside Links，而不是带有 h 键high:和low:.

如果其他人遇到此问题，我希望这会有所帮助。

推荐阅读