0

我有 useSWR 并且我将带有 SSR 的数据作为初始值放入其中并获得一个数组。如果我从 SSR 制作聊天控制台日志，那么它们会定期显示正常信息。

问题是 useSWR 有时会奇迹般地向我返回一个 OBJECT ，甚至在第二个控制台日志期间变成一个空数组。这怎么可能？

而最令人惊讶的是，在其他只有1个useSWR请求的页面上也有类似的方案（如果有必要，我可以用截图或代码来证明，那里是一样的）。但是在 THIS 发生的页面上，这些请求 3. 我已经困惑了很长时间，我认为这很神奇。我倾向于认为应该归咎于支持者，但他否认了这一点。

const ChatList: React.FC<IChatList> = ({ chats }) => {
  const { data, error } = useSWR("/api/chat/", {
    initialData: chats,
  });

  console.log(data);

  if (error) return <ErrorMessage message="Ошибка загрузки чатов..." />;

  if (!data) return <LoadingSpinner />;

  if (data.length === 0)
    return <EmptyMessage message="У вас пока нет чатов..." />;

  return (
    <SChatList>
      {data.map((item, key) => {
        return (
          <ChatListItem
            key={`chat__key__${item.user_name}__${key}`}
            id={item.id}
            userName={item.user_name}
            isNotify={false}
            isRead={item.is_read}
          />
        );
      })}
    </SChatList>
  );
};

从 SSR 获取聊天记录：

export const getServerSideProps: GetServerSideProps<ISupport> = async (ctx) => {
  let chats: IChat[] | null = null;
  await instanceWithSSR(ctx)
    .get("/api/chat/")
    .then((response) => {
      chats = response?.data;
    })
    .catch((error) => {
      console.log(error);
    });
  return {
    props: {
      chats: chats || null,
    },
  };
};

全局 useSWR 配置：

<SWRConfig
          value={{
            revalidateOnMount: true,
            revalidateOnFocus: false,
            dedupingInterval: 5000,
            fetcher: (url) =>
              axios({
                url: url,
                baseURL: process.env.DB_HOST,
                headers: {
                  "Content-Type": "application/json",
                  Authorization: `Token ${Cookie.get("token")}`,
                },
              }).then((r) => r.data),
          }}
        >
.......
4

0 回答 0