Node + React 实战：从 0 到 1 实现记账本（十二）——账单列表页

2024-01-11 15:46:08

React 是一款由 Facebook 开发的 JavaScript 框架，用于构建用户界面。它使用组件化方法，允许开发人员创建可复用的代码块。Node.js 是一个 JavaScript 运行时环境，可用于在服务器端执行 JavaScript 代码。

Node + React 是一个强大的组合，可以用于构建各种类型的 web 应用程序。在本教程中，我们将向你展示如何使用 Node + React 从头开始构建一个记账本应用程序。

在本教程的第十二部分中，我们将向你展示如何创建账单列表页。账单列表页将显示用户所有账单的列表。

本教程的先决条件

在继续本教程之前，确保你已满足以下先决条件：

了解 JavaScript 和 React
安装了 Node.js 和 npm
已完成本教程的前面部分

创建账单列表页

要创建账单列表页，请在 src 目录中创建一个新的文件，并将其命名为 BillListPage.js。在该文件中，导入必要的 React 组件：

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

接下来，创建 BillListPage 组件：

const BillListPage = () => {
  const [bills, setBills] = useState([]);

  useEffect(() => {
    // 从服务器获取账单列表
    fetch("/api/bills")
      .then((res) => res.json())
      .then((data) => setBills(data))
      .catch((err) => console.error(err));
  }, []);

  return (
    <div>
      <h1>账单列表</h1>
      <ul>
        {bills.map((bill) => (
          <li key={bill.id}>{bill.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default BillListPage;

在 BillListPage 组件中，我们使用 useState hook 来存储账单列表。我们还使用 useEffect hook 从服务器获取账单列表。然后，我们使用 map 方法将账单列表渲染到 UI 中。

接下来，我们需要在 App.js 文件中添加一个路由到 BillListPage 组件：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import BillListPage from "./BillListPage";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/bills" component={BillListPage} />
      </Switch>
    </Router>
  );
}

export default App;