Добавление компонента программно

Question

Я пытаюсь создать очень упрощенную версию бесконечной прокрутки.

В настоящее время у меня все отлично работает, кроме сообщений, поступающих из компонента сообщений.

В моем основном компоненте для страницы блога

У меня есть следующее

<Index id="posts-container">
    <Posts posts={postsChunked[0]} />
</Index>

Я использую useEffect() в верхней части компонента, чтобы разделить массив записей, это взято из graphQL и красиво отформатировано в массив для передачи моему компоненту Posts).

В этой функции useEffect() у меня есть право postsChunked загрузка массива в консоль.

Что мне нужно знать, так это как я могу pu sh этот массив, например postsChunked[1], в контейнер Index из useEffect() (если это правильный путь).

По сути, я хочу следующее в зависимости от количества страниц, но мне нужно страницы 1 и 2 загружаются позже, но не уверены, как запустить это из useEffect()

<Index id="posts-container">
    <Posts posts={postsChunked[0]} />
    <Posts posts={postsChunked[1]} />
    <Posts posts={postsChunked[2]} />
</Index>

FYI Это моя первая сборка Gatsby:)

Answer 1

Есть состояние, в котором вы храните свой массив почтовых чанков.

const [postChunks, setPostChunks] = React.useState([]);

Когда вы выбираете больше данных, добавляете их в это состояние.

const loadMoreDataSomehow = async () => {
  const newPostsChunk = await fetch('/somewhere'); // this will be an array of post; a postChunk
  setState(prev => [...prev, newPostsChunk]);
}

И, наконец, визуализируйте их вызывая .map() для массива:

return (
  <Index id="posts-container">
    {postChunks.map((postChunk, index) => (
      <Posts posts={postChunk} key={index} />
    ))}
  </Index>
);

В идеале, вы не должны использовать index в качестве key. Вероятно, вы можете использовать объединенные ids всех сообщений в чанке.