You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React19:use hook与Suspense结合Server Action报错,是否无需useEffect?

React 19客户端组件结合Server Function与use Hook报错问题

在React 19中,我尝试创建Server Function配合客户端组件(非服务器组件)执行异步请求。将异步请求直接写在客户端组件内时可正常获取数据,但移至Server Function后,出现如下错误:

Can't perform a React state update on a component that hasn't mounted yet. 
This indicates that you have a side-effect in your render function that 
asynchronously later calls tries to update the component. 
Move this work to useEffect instead.

我认为在使用新的use Hook和Suspense的React 19代码中,应该无需添加useEffect或useState。


报错的客户端组件代码

"use client";
import { use, Suspense } from "react";
import { fetchUsers } from './actions';

const userPromise = fetchUsers();

const Users = () => {
  const users = use(userPromise);

  return (
    <div>
      <h1>Client Side Only (use hook and suspense)</h1>
      <ul>
        {users.map((user) => (
          <div key={user.id}>
            <h2>{user.name}</h2>
          </div>
        ))}
      </ul>
    </div>
  );
};

function App() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <Users />
    </Suspense>
  );
}

export default App;

对应的Server Action代码

'use server';

export async function fetchUsers() {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  return res.json();
}

未使用Server Function的正常运行代码

"use client";
import { use, Suspense } from "react";

const fetchUsers = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

const userPromise = fetchUsers();

const Users = () => {
  const users = use(userPromise);

  return (
    <div>
      <h1>Client Side Only (use hook and suspense)</h1>
      <ul>
        {users.map((user) => (
          <div key={user.id}>
            <h2>{user.name}</h2>
          </div>
        ))}
      </ul>
    </div>
  );
};

function App() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <Users />
    </Suspense>
  );
}

export default App;

内容的提问来源于stack exchange,提问作者Peter Kellner

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.15 05:14:57