如何在React组件中展示FastAPI返回的Todo列表？

你的问题出在两个核心点：一是未正确遍历接口返回的data数组，二是无序列表标签拼写错误（把<ul>写成了<ui>）。

修正后的组件代码 #

import React, { useEffect, useState } from "react";

export default function Todos() {
    // 初始化state为包含data数组的对象，避免访问todo.data时出现undefined
    const [todo, setTodo] = useState({ data: [] })
    useEffect(() => {
        fetch('http://localhost:8000/todos')
            .then(response => response.json())
            .then(json => setTodo(json))
    }, [])
    return (
        <div>
            <h1>My Todos:</h1>
            {/* 修正无序列表标签为ul */}
            <ul>
                {/* 遍历todo.data数组，生成每个待办项的列表元素 */}
                {todo.data.map(item => (
                    <li key={item.id}>
                        {item.name} {item.is_done ? "(已完成)" : "(未完成)"}
                    </li>
                ))}
            </ul>
        </div>
    )
}

关键细节说明 #

• 接口返回的是包含data数组的对象，所以需要通过todo.data获取待办列表数据，再用map方法遍历生成列表项；
• 用item.id作为列表项的key，是React列表渲染的最佳实践，保证每个项的唯一性；
• 初始化state为{ data: [] }，可以避免接口请求完成前访问todo.data时出现undefined的问题；
• 可以根据is_done状态展示不同的文本，直观区分待办项的完成状态。

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