这是我的页面代码todolist.js
import Todo from "./todo";
const getTodos = async () => {
let todos = await fetch("/api/todo/list");
return todos.json();
};
export default async function TodoList() {
const { todos } = await getTodos();
return (
<div>
<ul style={{ listStyleType: "none", padding: 0 }}>
{todos.map((t) => {
return (
<li key={t.id} style={{ padding: "5px 0" }}>
</li>
);
})}
</ul>
</div>
);
}
给出这个误差
> > my-next-app@0.1.0 build
> next build
info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
[ ] info - Generating static pages (0/7)
Error occurred prerendering page "/todolist". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:490) at Zc (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
at Zc (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
at Zc (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
at $c (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98) at bd (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)(node:10420) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
undefined
info - Generating static pages (7/7)
> Build error occurred
Error: Export encountered errors on following paths:
/todolist
at C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\export\index.js:415:19
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Span.traceAsyncFn (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\trace\trace.js:79:20)
at async C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\build\index.js:1400:21
at async Span.traceAsyncFn (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\trace\trace.js:79:20)
at async C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\build\index.js:1259:17
at async Span.traceAsyncFn (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\trace\trace.js:79:20)
at async Object.build [as default] (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\build\index.js:66:29)
PS C:\Users\MazharKaunain\klll\my-next-app>
有人能指出问题的根源吗?我正在运行here中的示例
1条答案
按热度按时间d6kp6zgx1#
看起来您甚至在todo拥有任何数据之前就调用了
todos.map
,让我们使用以下命令执行一个简单的值检查来修复它todos!==null && todos!==undefined && todos.length>0 &&
您还可以使用Ternary来显示不同的情况,例如