如何使用 React 和 MySQL 通过 ID 检索和显示数据？

使用 React 和 MySQL 通过 ID 检索和呈现数据

简介

在构建数据驱动的 Web 应用程序时，检索和显示信息至关重要。React 作为一个流行的 JavaScript 框架，使我们能够构建交互式用户界面，而 MySQL 是一个强大的关系数据库管理系统，可用于存储和管理数据。本文将深入探讨如何在 React 中使用 MySQL，并通过 ID 检索和呈现数据。

实现

1. 创建 React 组件

创建一个名为 SingleItem 的 React 组件，负责显示单个项目的详细信息。

2. 获取 ID

使用 useSearchParams React Hook 从 URL 查询参数中获取项目的 ID。

3. 使用 useEffect 钩子

useEffect 钩子允许我们在组件生命周期中执行副作用。在这里，我们使用它在组件挂载时检索项目数据。

4. 检索项目数据

使用 fetch() API 向 MySQL 数据库发送 HTTP 请求，以通过指定的 ID 检索项目数据。

5. 设置状态

将获取的数据存储在组件状态中，以便在 UI 中使用。

6. 呈现数据

在组件的 render() 方法中，通过映射函数遍历项目数据，并呈现每个项目的详细信息。

代码示例

import React, { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";

const SingleItem = () => {
  // 设置用于存储项目数据的 state
  const [singleItem, setSingleItem] = useState([]);

  // 获取 URL 查询参数中的 ID
  const [searchParams] = useSearchParams();
  const id = searchParams.get("item");

  // 在组件挂载时获取项目数据
  useEffect(() => {
    getItem();
  }, [id]);

  // 使用 fetch() 检索项目数据
  const getItem = async () => {
    try {
      const response = await fetch(`/api/items?item=${id}`);
      const data = await response.json();
      setSingleItem(data);
    } catch (err) {
      console.log(err);
    }
  };

  // 呈现项目数据
  return (
    <div>
      <ul>
        {singleItem.map((item) => (
          <li key={item.id}>
            {item.type}, {item.era}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default SingleItem;

事件处理

为了将项目 ID 从另一个组件传递到 SingleItem 组件，需要一个事件处理程序。以下示例处理程序在用户单击项目时发送 ID：

const ItemList = () => {
  // 设置用于存储项目数据的 state
  const [items, setItems] = useState([]);

  // 获取 URL 查询参数中的类别
  const [searchParams] = useSearchParams();
  const category = searchParams.get("category");

  // 在组件挂载时获取项目数据
  useEffect(() => {
    getItems();
  }, []);

  // 使用 fetch() 检索项目数据
  const getItems = async () => {
    try {
      const response = await fetch(`/api/items?category=${category}`);
      const data = await response.json();
      setItems(data);
    } catch (err) {
      console.log(err);
    }
  };

  // 呈现项目数据并处理单击事件
  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <Link to={`/singleitem?item=${item.id}`}>{item.type}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ItemList;

常见问题解答

1. 如何配置 MySQL 数据库？

MySQL 数据库的配置因系统而异。请参阅 MySQL 官方文档以了解详细说明。

2. 我需要使用哪些 React 库？

你需要使用 useSearchParams 和 useEffect 钩子。

3. 我可以使用其他数据库吗？

除了 MySQL，你还可以使用其他数据库，例如 PostgreSQL、MongoDB 或 SQLite。

4. 如何处理错误？

在数据检索过程中，使用 try-catch 块处理错误非常重要。

5. 如何提高性能？

使用缓存机制或分页技术可以显着提高检索数据的性能。

结论

通过使用 React 和 MySQL，你可以构建强大的数据驱动的 Web 应用程序。本文提供了通过 ID 检索和呈现数据的全面指南。通过遵循这些步骤并解决常见问题，你可以有效地管理和显示数据库中的信息。