next.js 渲染前错误：缩小React错误#31;请访问https：//reactjs.org/docs/error-decoder.html？invariant = 31&args []= %5B对象%20承诺%5D

这是我的页面代码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中的示例

看起来您甚至在todo拥有任何数据之前就调用了todos.map，让我们使用以下命令执行一个简单的值检查来修复它
todos!==null && todos!==undefined && todos.length>0 &&

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!==null && todos!==undefined && todos.length>0 &&
         todos.map((t) => {
          return (
            <li key={t.id} style={{ padding: "5px 0" }}>
              
            </li>
          );
        })}
      </ul>
    </div>
  );
}

您还可以使用Ternary来显示不同的情况，例如

{todos!==null && todos!==udefined &&
todos.length>0 ?
   // Render list with map

   :
   // Render list is empty
}

next.js 渲染前错误：缩小React错误#31;请访问https：//reactjs.org/docs/error-decoder.html？invariant = 31&args []= %5B对象%20承诺%5D

1条答案

相关问题

热门标签

最新问答