React中API返回数据无法渲染至JSX的问题求助

1. 修复map函数的返回问题 #

你的appointments?.map回调使用大括号{}但未返回JSX元素，React无法渲染内容。两种修复方式：

• 替换大括号为小括号（自动返回）：

appointments?.map(appt => (
    <div key={appt.id}>
        <h2>{appt.start_datetime}</h2><br></br>
        <h2>{appt.teacher.first_name}</h2><br></br>
        <h2>{appt.status}</h2>
    </div>
))

• 或在大括号内添加return：

appointments?.map(appt => {
    return (
        <div key={appt.id}>
            <h2>{appt.start_datetime}</h2><br></br>
            <h2>{appt.teacher.first_name}</h2><br></br>
            <h2>{appt.status}</h2>
        </div>
    )
})

2. 触发API请求函数 #

你定义了getAppointmentsForTeacherForDate但未在组件挂载或参数变化时调用，导致appointments始终为空数组。用useEffect钩子触发请求：

import React, { useState, useEffect } from "react";
// 保留其他导入代码

export default function Appointments({ teacher_id, date }) {
    const [appointments, setAppointments] = useState([]);

    function updateAppointments(data) {
        setAppointments(data);
    }

    function getAppointmentsForTeacherForDate(teacher_id, date) {
        // 修正URL变量错误：${teacher}改为${teacher_id}
        axios.get(`http://localhost:3000/api/v1/teachers/${teacher_id}/appointmentsForDate/`,
          { params: { teacher_id: teacher_id, date: date }},
          {withCredentials: true}
        ).then(response => {
          if (response.data.appointments) {
            updateAppointments(response.data.appointments);
          } else {
            console.log("Failed to get appointments for teacher");
          }
        })
    }

    // 组件挂载或teacher_id/date变化时执行请求
    useEffect(() => {
        if (teacher_id && date) {
            getAppointmentsForTeacherForDate(teacher_id, date);
        }
    }, [teacher_id, date]);
    
    // 保留返回部分代码
}

3. 修正API请求URL的变量错误 #

请求URL中${teacher}是未定义变量，需改为${teacher_id}，否则会导致请求路径错误（即使你说API返回了数据，大概率是代码笔误）。

4. 可选：添加状态提示提升体验 #

添加加载状态和无预约提示，避免页面空白：

// 新增加载状态
const [loading, setLoading] = useState(false);

// 修改请求函数添加状态控制
function getAppointmentsForTeacherForDate(teacher_id, date) {
    setLoading(true);
    axios.get(`http://localhost:3000/api/v1/teachers/${teacher_id}/appointmentsForDate/`,
      { params: { teacher_id: teacher_id, date: date }},
      {withCredentials: true}
    ).then(response => {
      setLoading(false);
      if (response.data.appointments) {
        updateAppointments(response.data.appointments);
      } else {
        console.log("Failed to get appointments for teacher");
      }
    }).catch(err => {
        setLoading(false);
        console.error("请求出错：", err);
    })
}

// 修改返回部分
return (
    <>
        <div>
            {loading && <p>加载中...</p>}
            {!loading && appointments.length === 0 && <p>暂无预约</p>}
            {!loading && appointments?.map(appt => (
                <div key={appt.id}>
                    <h2>{appt.start_datetime}</h2><br></br>
                    <h2>{appt.teacher.first_name}</h2><br></br>
                    <h2>{appt.status}</h2>
                </div>
            ))}
        </div>
    </>
);

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