Consolo.log 显示我正在从 api 获取我的项目，但是它们没有呈现在我的页面上？

Question

这是我写的代码。

import React from "react";
import { Todo } from "../../typings";

import Link from "next/link";

const fetchTodos = async () => {
  const res = await 

fetch("https://jsonplaceholder.typicode.com/todos/");
  const todos: Todo[] = await res.json();
  console.log(todos);
  return todos;
};

async function TodoList() {
  const todos = await fetchTodos();
  return (
    <>
      {todos.map((todo) => {
        <p>
          <Link href={`/todos/${todo.id}`}>Todo: {todo.id}</Link>
        </p>;
      })}
    </>
  );
}

export default TodoList;

我无法使用地图在我的页面上呈现项目，但我的项目确实已登录到控制台，所以我认为这只是地图功能。不确定什么不起作用。

Answer 1

每当我们使用

map

函数时，总是需要使用

return

语句，以便数据可以呈现，用户可以在页面上看到数据。

{todos.map((todo) => {
     return (
     <>
        <p>
          <Link href={`/todos/${todo.id}`}>Todo: {todo.id}</Link>
        </p>
     </>
     )
 })}

不使用它什么也看不到:)

希望对您有所帮助！