Блог

Главная - Вопросы по программированию - Рекурсивный компонент React для глубоких вложенных данных

Рекурсивный компонент React для глубоких вложенных данных

#javascript #reactjs #react-redux

#javascript #reactjs #react-redux

Вопрос:

Я пытаюсь преобразовать данные JSON с глубокой вложенностью следующим образом

Данные

 [
    {
        _id: 1,
        name: 'name',
        children: [...]
    },
];

Компонент React

 import React from 'react';

const TableRow = ({ standard }) => {
    if (standard.children amp;amp; standard.children.length === 0) {
        return <p>Children-{standard.name}</p>;
    }

    return (
        <div>
            <p>Parent-{standard.name}</p>
            {standard.children amp;amp;
                standard.children.length amp;amp;
                standard.children.map((child, i) => (
                    <>
                         <TableRow
                            key={`${child._id}`}
                            standard={child}
                        /> 
                    </>
                ))}
        </div>
    );
};

export default TableRow;

Родительский компонент

 {updatedStandards.map((standard) => (
    <TableRow key={standard._id} standard={standard} />
))}

Во время запуска компонента браузер зависает …

Комментарии:

1. Есть ли у вас какой-либо эффект использования или что-то в родительском или дочернем элементе?

2. Может ли быть родительский элемент, который также является дочерним элементом в будущем? Это создало бы цикл. (Хотя это невозможно, если это JSON)

3. Поскольку ваш браузер зависает, здесь определенно происходит бесконечный цикл, поэтому попытайтесь понять, почему React не «останавливает» рендеринг TableRow в какой-то момент. Я предполагаю standard.children amp;amp; standard.children.length === 0 , что по какой-то причине этого не происходит… немного сложно «угадать» отсюда

4. Родительский элемент имеет useEffect для получения данных из API @JoseRojas