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
相关产品推荐
相关产品推荐

