Console.log已获取API数据，但页面无法渲染列表问题排查

你的代码存在两个核心问题，导致页面无法渲染数据条目：

1. map回调未返回JSX元素 #

你在todos.map的回调中使用了大括号{}，但既没有显式返回<p>元素，也没有用小括号()包裹JSX实现隐式返回。React无法识别该回调的有效返回值，因此不会渲染任何内容。

2. Next.js Pages Router中组件不能是async函数 #

在Next.js的Pages Router模式下，页面组件不能直接定义为async函数，这种写法会触发渲染异常。需要改用官方推荐的数据获取方案，比如服务端渲染的getServerSideProps，或是客户端通过useEffect配合状态获取数据。

修复方案一：服务端渲染（getServerSideProps） #

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

// 页面组件改为普通函数
function TodoList({ todos }: { todos: Todo[] }) {
  return (
    <>
      {todos.map((todo) => (
        // 必须添加唯一key属性，帮助React识别列表元素
        <p key={todo.id}>
          <Link href={`/todos/${todo.id}`}>Todo: {todo.id}</Link>
        </p>
      ))}
    </>
  );
}

// 在服务端获取数据并传递给组件
export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/");
  const todos: Todo[] = await res.json();
  return {
    props: { todos },
  };
}

export default TodoList;

修复方案二：客户端渲染（useEffect） #

如果需要在客户端侧获取数据，可以使用这种写法：

import React, { useState, useEffect } from "react";
import { Todo } from "../../typings";
import Link from "next/link";

function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([]);

  useEffect(() => {
    const fetchTodos = async () => {
      const res = await fetch("https://jsonplaceholder.typicode.com/todos/");
      const data: Todo[] = await res.json();
      setTodos(data);
    };
    fetchTodos();
  }, []);

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

export default TodoList;

额外注意：React渲染列表时，必须为每个列表项添加唯一的key属性，这是React追踪列表元素变化的关键，能避免不必要的组件重渲染。

内容的提问来源于stack exchange，提问作者Cristina Zhou