5465

Проблема возникает из-за рекурсивной функции, которая вызывает себя слишком много раз, что приводит к переполнению стека вызовов.

В вашем коде рекурсия находится внутри функции getCommentsChildren. В этой функции вы вызываете функцию recursFunc для каждого элемента массива children, который, вероятно, является частью объекта data, полученного из api. Однако вы передаете неправильный аргумент в рекурсивный вызов recursFunc, используя переменную children вместо comments. Это приводит к бесконечному циклу, который приводит к переполнению стека вызовов.

Чтобы исправить проблему, вы можете передавать правильный аргумент в рекурсивный вызов recursFunc, используя переменную comments вместо children. Также вам следует добавить условие выхода из рекурсии, чтобы она не продолжалась бесконечно.

Исправленный код функции getCommentsChildren должен выглядеть примерно так:

async getCommentsChildren(kids: number[], id: number, children: IComment[]) {
    const data: IComment[] = [];
    if (kids === undefined) return;
    for (const item of kids) {
      const response = await api.get<IComment>(
        `https://hacker-news.firebaseio.com/v0/item/${item}.json`
      );
      data.push(response);
    }
    const recursFunc = (comments: IComment[]) => {
      if (!comments) return;
      for (let i = 0; i < comments.length; i++) {
        comments[i].children = data;
        if (comments[i].kids.length) {
          recursFunc(comments[i].children);
        }
      }
      return comments;
    };
    runInAction(() => {
      this.comments = recursFunc(children);
    });
  }

Также, обратите внимание на то, что в компоненте RecursiveComponent вы используете data.map, даже если data не является массивом. Это может вызвать ошибку во время выполнения. Вы можете добавить проверку на массив перед использованием map:

const RecursiveComponent: FC<IRecursiveProps> = observer(({ data, getChildren }) => {
  if (!Array.isArray(data)) {
    return null; // or any fallback component or message
  }

  return (
    <div>
      {data.map((parent: any) => {
        return <Comment parent={parent} getChildren={getChildren} data={data} />;
      })}
    </div>
  );
});

Надеюсь, это поможет вам решить проблему!

Проблема может быть связана с тем, что при добавлении get параметра в URL компонент Dashboard перерендеривается и создается новый экземпляр Redux store для этого компонента, который не содержит сохраненных данных.

Для решения этой проблемы необходимо сохранять состояние Redux store вне компонента и передавать его внутрь компонента при каждом рендере. Для этого можно использовать React Context API.

В главном приложении создайте контекст:

// appContext.js
import React from 'react';

export const AppContext = React.createContext({});

В главном приложении оберните ваш компонент в провайдер контекста и передайте в контекст текущее состояние Redux store:

// App.js
import { AppContext } from './appContext';

function App() {
  const [store, setStore] = useState(initialState); // начальное состояние Redux store

  return (
    <AppContext.Provider value={{ store, setStore }}>
      <Routes>
        <Route path='items' element={<Items />} />
      </Routes>
    </AppContext.Provider>
  );
}

В компоненте Dashboard микрофронта, вы можете получить текущее состояние Redux store через контекст и использовать его для отображения данных:

// Dashboard.js
import React, { useContext } from 'react';
import { useSearchParams } from 'react-router-dom';
import { AppContext } from '../appContext';

function Dashboard() {
  const { store } = useContext(AppContext);
  const [searchParams] = useSearchParams();

  // получаем данные из текущего состояния Redux store
  const items = store.items;

  // обновляем данные в Redux store, если это необходимо
  if (searchParams.get('update')) {
    const newItems = await fetchItems(); // получаем новые данные
    setStore(prevState => ({ ...prevState, items: newItems })); // обновляем состояние Redux store
  }

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

Теперь, когда вы добавляете параметр update в URL, компонент Dashboard не будет перерендериваться и состояние Redux store не будет сбрасываться, потому что вы сохраняете его в контексте.