React教程：从API获取数据并动态渲染列表的最佳实践

const [drInfo, setDrInfo] = useState([]);

function showInfo(data, index) {
  if (data && data.data && data.data.length > 0) {
    const doctorData = data.data[index]; // 这里只取了指定索引的数据
    setDrInfo({ // 并且将状态设置为一个单一的对象
      name: doctorData.Fname,
      lname: doctorData.Lname,
    });
  } else {
    return null;
  }
}

useEffect(() => {
  const url = "https://.../homepage/consts_list_homepage";
  fetch(url, {
    headers: { "Content-Type": "application/json" },
  })
    .then((response) => response.json())
    .then((data) => showInfo(data, 0)) // 调用showInfo时，固定传入了索引0
    .catch((error) => console.error(error));
}, []);

return (
  <div>           
    {[drInfo].map((drInfo, index) => { // 这里映射的是一个包含单一对象的数组
      return (
        <div key={index}>
          <Doctors info={drInfo} />
        </div>
      );
    })}    
  </div>
);

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

// 假设Doctors组件已经定义
// const Doctors = ({ info }) => (
//   <div>
//     <h3>{info.name} {info.lname}</h3>
//     {/* 其他医生信息 */}
//   </div>
// );

function DoctorList() {
  const [drInfo, setDrInfo] = useState([]); // 状态现在会存储一个医生对象数组

  useEffect(() => {
    const url = "https://.../homepage/consts_list_homepage"; // 替换为你的实际API地址

    fetch(url, {
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then((data) => {
        if (data && data.data && Array.isArray(data.data) && data.data.length > 0) {
          // 对API返回的医生数据数组进行映射和预处理
          const doctorsData = data.data.map((item, index) => {
            return {
              id: index + 1, // 使用索引作为唯一ID，或者如果API提供唯一ID则使用API的ID
              name: item.Fname,
              lname: item.Lname,
              // 根据API返回的其他字段，添加更多属性
            };
          });
          setDrInfo(doctorsData); // 将处理后的医生数组存储到状态中
        } else {
          console.warn("API返回数据为空或格式不正确:", data);
          setDrInfo([]); // 数据为空时清空列表
        }
      })
      .catch((error) => {
        console.error("获取医生数据失败:", error);
        // 可以在这里设置错误状态，向用户显示错误信息
      });
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  // ... 渲染部分
}

// 承接上文的 DoctorList 函数
function DoctorList() {
  const [drInfo, setDrInfo] = useState([]);
  // ... useEffect 钩子

  return (
    <div>           
      {drInfo.length > 0 ? ( // 检查drInfo是否有数据，避免空列表渲染
        drInfo.map((info) => (
          <div key={info.id}> {/* 使用info.id作为key */}
            <Doctors info={info} />
          </div>
        ))
      ) : (
        <p>正在加载医生信息或暂无医生信息...</p> // 加载状态或无数据提示
      )}    
    </div>
  );
}

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

// 假设这是你的Doctors组件
// 它接收一个名为 'info' 的prop，包含医生的姓名等信息
const Doctors = ({ info }) => {
  return (
    <div style={{ border: '1px solid #ccc', margin: '10px', padding: '10px', borderRadius: '5px' }}>
      <h4>医生姓名: {info.name} {info.lname}</h4>
      <p>ID: {info.id}</p>
      {/* 可以在这里展示更多医生信息 */}
    </div>
  );
};

function DoctorList() {
  const [drInfo, setDrInfo] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const url = "https://.../homepage/consts_list_homepage"; // **请替换为你的实际API地址**

    setLoading(true); // 开始加载
    setError(null); // 清除之前的错误

    fetch(url, {
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then((data) => {
        if (data && data.data && Array.isArray(data.data) && data.data.length > 0) {
          const doctorsData = data.data.map((item, index) => {
            return {
              id: item.id || `doc-${index + 1}`, // 优先使用API提供的ID，否则使用索引生成
              name: item.Fname,
              lname: item.Lname,
              // 根据API返回的其他字段，添加更多属性
            };
          });
          setDrInfo(doctorsData);
        } else {
          console.warn("API返回数据为空或格式不正确:", data);
          setDrInfo([]); // 数据为空时清空列表
        }
      })
      .catch((err) => {
        console.error("获取医生数据失败:", err);
        setError("无法加载医生信息，请稍后再试。"); // 设置错误信息
      })
      .finally(() => {
        setLoading(false); // 结束加载
      });
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  if (loading) {
    return <div>正在加载医生信息...</div>;
  }

  if (error) {
    return <div style={{ color: 'red' }}>错误: {error}</div>;
  }

  return (
    <div>
      <h2>医生列表</h2>
      {drInfo.length > 0 ? (
        drInfo.map((info) => (
          <div key={info.id}>
            <Doctors info={info} />
          </div>
        ))
      ) : (
        <p>暂无医生信息。</p>
      )}
    </div>
  );
}

export default DoctorList;