Nextjs Suspense不支持fetch API，但支持新的promise timeout

qlvxas9a 于 12个月前发布在其他

关注(0)|答案(1)|浏览(234)

Next.js不起作用，我尝试使用fetch Api获取数据，但不会显示挂起回退，但当我使用settask编写新的promise时，它工作得很好。据我所知，fetch API是基于promise的，那么为什么不添加额外的promise挂起代码行就不起作用呢？
范例：

interface Post {
    userId: number,
    id: number,
    title: string,
    body: string
}

async function getPosts() {
    const posts: any = await fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()).catch(res => new Error('Failed to fetch data'));
    // await new Promise((resolve) => setTimeout(resolve, 2000));
    return posts;
}

async function View() {
    const posts: Post[] = await getPosts();

    
    return (
        <main>
            {posts && posts.map((post: Post) => {
              return <li>{post.title}</li>  
            })}
        </main>
    )
}

export default View

字符串
父组件：

import { Suspense } from "react"
import Loading from "./loading"
import View from '../../components/View';


const Dashboard = () => {
  return (
    <div>
        <Suspense fallback={<Loading />}>
            <View />
        </Suspense>
    </div>
  )
}

export default Dashboard

型
尝试查找指定的信息，但仍然难以理解。

next.js

来源：https://stackoverflow.com/questions/77721234/nextjs-suspense-wont-work-with-fetch-api-but-with-new-promise-timeout-work-perf

1条答案

按热度按时间

6psbrbz91#

该问题可能与promise的处理有关，没有必要使用setforth来管理promise，如果使用setforc/await来处理promise，代码会一直等待，直到数据被接收到任何变量中，在等待数据时这个问题可能与Suspense目前不支持Next.js中的服务器端渲染（SSR）有关。Suspense主要是为与React的并发模式一起使用而设计的，这与服务器渲染不完全兼容。

1.使用useEffect获取数据，这是组件挂载后获取数据的常用方法

import { useEffect, useState } from 'react';

async function getPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  return posts;
}

function View() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    getPosts().then((data) => setPosts(data));
  }, []);

  return (
    <main>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </main>
  );
}

export default View;

字符串

“如果您在SSR中使用，则使用”使用客户端“。*
2.确保回退组件<Loading />组件工作正常，并且没有任何可能阻止其显示的问题。

文件参考React Suspense

3.如果您正在使用SSR（服务器端渲染）Nextjs，请尝试使用getServerSideProps或getStaticProps来获取数据。

import View from '../components/View';

const Dashboard = ({ posts }) => {
  return (
    <div>
      <View posts={posts} />
    </div>
  );
};

export async function getServerSideProps() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();

  return {
    props: {
      posts,
    },
  };
}

export default Dashboard;

型

赞(0）回复(0）举报 11个月前

我来回答

Nextjs Suspense不支持fetch API，但支持新的promise timeout

1条答案

相关问题

热门标签

最新问答