проблемы в React и рендеринг компонента - PullRequest
Новая
       6

проблемы в React и рендеринг компонента

1 голос
/ 02 марта 2020

В последнее время я пытаюсь использовать эту библиотеку: https://github.com/zeit/swr/blob/master/examples/pagination/pages/page-index.js, но я только добавил одно изменение, которое является объявлением функции, и вот мой код: 

import fetch from "isomorphic-unfetch";
import useSWR, { useSWRPages } from "swr";

const myData = () => {
  const { pages, isLoadingMore, isReachingEnd, loadMore } = useSWRPages(
    // page key
    "demo-page-2",
    // page component
    ({ offset, withSWR }) => {
      const { data: projects } = withSWR(
        // use the wrapper to wrap the *pagination API SWR*
        useSWR("myapi" + (offset || 0), fetch)
      );
      // you can still use other SWRs outside
      if (!projects) {
        return <p>loading</p>;
      }
      return projects.map(project => <p key={project.id}>{project.name}</p>);
    },

    // get next page's offset from the index of current page
    (SWR, index) => {
      // there's no next page
      if (SWR.data && SWR.data.length === 0) return null;
      // offset = pageCount × pageSize
      return (index + 1) * 3;
    },
    // deps of the page component
    []
  );

  return (
    <div>
      <h1>Pagination (index as offset)</h1>
      {pages}
      <button onClick={loadMore} disabled={isReachingEnd || isLoadingMore}>
        {isLoadingMore ? ". . ." : isReachingEnd ? "no more data" : "load more"}
      </button>
      <hr />
    </div>
  );
};
export default myData;

, но появляется следующая ошибка:

Предупреждение: невозможно обновить компонент изнутри тела функции других компонентов.

И данные не отображаются на моей странице, но они отображаются в моих журналах следующим образом: 

Response {
  type: "basic",
  url: "http://localhost:3000/api?_page=0&_limit=20",
  redirected: false,
  status: 200,
  ok: true,
  …
}
type: "basic"
url: "http://localhost:3000/api?_page=0&_limit=20"
redirected: false
status: 200
ok: true
statusText: "OK"
headers: Headers {}
body: (...)
bodyUsed: false
__proto__: Response

, и я вижу ответ 200 в моей сети.

Так что любая помощь будет оценена

...