如何组织我的 React.js 程序以使用按钮从订单列表中删除订单？

Question

我是 React 世界的新手。我编写了一个 React.js/Node.js 程序，可以可视化从数据库中获取的订单，然后我想添加通过按钮删除这些订单的可能性。我不太清楚如何组织代码以使其工作。 显然，第一次从 App.js 组件传递列表进行可视化时，由于 React.js 的渲染方法，我应该使用列表“initialOrders”而不是“orders”，但我不知道如何更新状态.

然后在服务器端我想对数据库进行查询以删除订单。

这就是我尝试过的：

订单列表.js

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

function OrderList({ initialOrders }) {
  const [orders, setOrders] = useState([initialOrders]);

  const HandleClick = (orderId) => {
    alert("I remove the item "+orderId+" from the db");
    useEffect(() => {
      fetch(`http://localhost:3001/api/removeOrder/${orderId}`)
        .then((response) => {
          if (response.ok) {              
            const updatedOrders = orders.filter((order) => order.order_id !== orderId);
            setOrders(updatedOrders);
          } else {
              console.error("Error deleting an order");
          }
        })
        .catch((error) => {
          console.error('Error:', error);
        })
    })
  }

  return (
    <div>
      <h2>Orders list</h2>
      <ul>
        {orders.map((order, index) => (
            <li key={index}>
              <div id={index}>
                <p>ID: {order.order_id}</p>
                <p>Nome: {order.customer_name}</p> 
                <p>Data: {order.order_date}</p>
                <p>Totale: {order.total_amount}</p>
                <p><button id={order.order_id} onClick={() => HandleClick(order.order_id)}>Remove order</button></p>
              </div>
            </li>
        ))}
      </ul>
    </div>
  );
}

export default OrderList;

server.js（Node）的一部分

app.get("/api/orders", (req, res) => {
  
  db.query("SELECT * FROM orders", (err, results) => {
    if (err) {
      console.error("Errore during the query to the db:", err);
      res.status(500).json({ error: "Error during the query to the db" });
    } else {
      console.log(results);
      res.status(200).json(results);
    }
  });
});

app.delete("/api/removeOrder/:orderId", (req,res) => {
    const orderId = req.params.orderId;
    console.log("Order to delete: " + orderId);

    db.query("DELETE FROM orders WHERE id = ?", [orderId], (error, results)=> {
      if (error) {
        console.error("Errore deleting the order:", error);
      } else {
        const msg = "Order successfully deleted";
        console.log(msg);
        res.status(200).send(msg);
      }
    });
});

Answer 1

您的问题有些不清楚，但我可以确定一些问题来帮助您使代码正常运行：

1. 在您的

   HandleClick

   函数中，您正在调用

   useEffect

   Hook。需要注意的是，不应在循环、条件或嵌套函数内调用 Hook。相反，始终在 React 组件的顶层使用 Hooks。在您的具体示例中，根本不需要调用

   useEffect

   函数。
2. 您正在使用的 API 端点

   /api/removeOrder/:orderId

   对应于 HTTP DELETE 方法。您需要在 fetch() 函数中指定此 HTTP 方法才能使其正常工作。如果不指定，fetch() 将始终假定它是 GET 方法调用。

// Updated HandleClick
const HandleClick = orderId => {
  alert('I remove the item ' + orderId + ' from the db');
  fetch(`http://localhost:5000/api/removeOrder/${orderId}`, {
    method: 'DELETE'
  })
    .then(response => {
      if (response.ok) {
        const updatedOrders = orders.filter(order => order.order_id !== orderId);
        setOrders(updatedOrders);
      } else {
        console.error('Error deleting an order');
      }
    })
    .catch(error => {
      console.error('Error:', error);
    });
};

您的代码还有其他需要改进的地方，但考虑到您作为初学者的身份，我希望这些建议对您的学习之旅有所帮助。