TypeError: Cannot read properties of undefined (reading '0')
Разрабатываю приложение на next js + neo4j + sigma js Всего 2 страницы:
- Страница с
input
и кнопкой "Искать". - Страница
'/search?query=123'
, на которой отображается граф связей (результат запроса кneo4j
).
Граф строится с помощью библиотеки sigma js
(точнее react-sigma
https://www.npmjs.com/package/react-sigma).
Связь с Neo4j
работает корректно.
Проблема в том, что при нажатии на кнопку "Искать" вылезает следующая ошибка (даже 2):
Далее, при обновлении страницы граф отображается корректно. Логически я понял, что проблема происходит во время рендеринга страницы (а именно графа) на стороне клиента. Не знаю, как исправить.
Начальная страница:
import Form from "next/form";
export default function Home() {
return (
<Form action="/search">
<input name="query" />
<button type="submit">Submit</button>
</Form>
);
}
Страница "/search"
:
import getSearchResults from "@/app/search/search";
import ResultGraph from "@/app/search/resultGraph";
export default async function Page({
searchParams,
}: {
searchParams: { [key: string]: string | string[] | undefined };
}) {
const { query } = await searchParams;
const results = await getSearchResults(query);
return (
<div>
<ResultGraph resultSearch={results} />
</div>
);
}
компонент, отображающий граф: (здесь для примера указан тестовый граф)
"use client";
import { Sigma, RandomizeNodePositions, RelativeSize } from "react-sigma";
export default function ResultGraph(resultSearch) {
let myGraph = {
nodes: [
{ id: "n1", label: "Alice" },
{ id: "n2", label: "Rabbit" },
],
edges: [{ id: "e1", source: "n1", target: "n2", label: "SEES" }],
};
return (
<div>
<h1>Это будущий граф!</h1>
<Sigma graph={myGraph} settings={{ drawEdges: true, clone: false }}>
<RelativeSize initialSize={15} />
<RandomizeNodePositions />
</Sigma>
</div>
);
}
Дополнительно, не уверен, связаны ли эти вещи, но даже после обновления и якобы корректного отображения, в консоль падает ошибка 500
Помогите, пожалуйста. Спасибо!