如何在React+TS中实现前端数据获取？附XAMPP本地数据库实践示例

这是学校教授的实践案例，演示如何利用XAMPP搭建本地服务器与基础数据库，通过TypeScript接口规范数据结构，并在React项目中实现前端数据的获取与状态管理：

// 定义TypeScript接口规范成员数据结构
interface Members {
    id: number;
    name: string;
    birthDate: string;
    gender: string;
    createdAt: string;
}

// 在React组件中声明状态，约束为Members数组类型
const [list, setMembers] = useState<Members[]>([]);

// 封装异步数据获取函数
const fetchData = async () => {
    await fetch('http://localhost:3000/api/members')
        .then((response) => response.json())
        .then((data) => setMembers(data))
        .catch((error) => console.log(error));
    console.log(list);
}

// 组件挂载时调用数据获取函数
useEffect(() => {
    fetchData();
}, []);

关键说明： #

• Members接口：严格约束后端返回的成员数据字段类型，确保前后端数据格式统一
• useState<Members[]>：通过TypeScript泛型限定状态数组的元素类型，避免类型错误
• fetch请求：向XAMPP本地服务器的/api/members接口发起请求，获取数据后更新组件状态
• useEffect：依赖空数组确保组件挂载时仅执行一次数据获取操作

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