如何洗掉存盤在后端服務器中的陣列中的專案？

抱歉，我對編碼很陌生，我無法洗掉該專案，因為單擊它會將我帶到頁面并出錯。我嘗試根據產品 ID 洗掉該專案，但它不起作用。當我重繪 頁面時，該專案仍然存在。

服務器中的陣列如下所示： [{"id":1,"name":"Apple","price":2,"createdAt":"2022","updatedAt":"2022"},{" id":2,"name":"Orange","price":1,"createdAt":"2022","updatedAt":"2022"}]

import "./App.css";
import React from "react";
import AddProduct from "./Components/AddProduct";
import SingleProduct from "./Components/SingleProduct";
import axios from "axios";
import { useState, useEffect } from "react";

export default function App() {
  const [openSingle, setOpenSingle] = useState(false);
  const [products, setProducts] = useState([]);
  const [currentId, setCurrentId] = useState("");

  const getInitialData = async () => {
    let initialAPICall = await axios.get(
      `${process.env.REACT_APP_API_SERVER}/products`
    );
    setProducts(initialAPICall.data);
  };

  useEffect(() => {
    getInitialData();
  }, []);

  const toggleView = (product) => {
    setOpenSingle(!openSingle);
    setCurrentId(product.id);
  };

  const createNewProduct = async (name, price) => {
    let product = {
      name,
      price,
    };
    let response = await axios.post(
      `${process.env.REACT_APP_API_SERVER}/products`,
      product
    );
    let newArray = [...products];
    newArray.push(response.data);
    setProducts(newArray);
  };

  const deleteClick = (id) => {
    var index = products
      .map(function (item) {
        return item.Id;
      })
      .indexOf(id);

    products.splice(index, 1);
  };

  return (
    <div className="App">
      <header className="App-header">
        {openSingle ? (
          <div>
            <SingleProduct toggle={toggleView} id={currentId} />
          </div>
        ) : (
          <div>
            <h4>Supermarket</h4>
            <h5>Products</h5>
            <div className="container">
              {products && products.length > 0 ? (
                products.map((product) => (
                  <div
                    className="product"
                    key={product.id}
                    onClick={() => toggleView(product)}
                  >
                    <h4>{product.name}</h4>
                    <h5>${product.price}</h5>
                    <button onClick={deleteClick(product.id)}>Delete</button>
                  </div>
                ))
              ) : (
                <p>Error</p>
              )}
            </div>
            <AddProduct addProduct={createNewProduct} />
          </div>
        )}
      </header>
    </div>
  );
}

我的控制器.js：

const BaseController = require("./baseController");

class ProductsController extends BaseController {
  constructor(model) {
    super(model);
  }

  async insertOne(req, res) {
    const { name, price } = req.body;
    try {
      const newProduct = await this.model.create({
        updated_at: new Date(),
        created_at: new Date(),
        name: name,
        price: price,
      });
      return res.json(newProduct);
    } catch (err) {
      return res.status(400).json({ error: true, msg: err });
    }
  }

  async getOne(req, res) {
    const id = req.params.productId;
    try {
      const output = await this.model.findByPk(id);
      return res.json(output);
    } catch (err) {
      console.log(err);
      return res.status(400).json({ error: true, msg: err });
    }
  }

  
}

module.exports = ProductsController;

在這種情況下如何洗掉專案？謝謝你。

uj5u.com熱心網友回復：

為此，您必須在快速服務器上創建一個路由來處理陣列中元素的洗掉。此路由使用“POST”方法向服務器發送要從陣列中洗掉的專案的名稱。您找到的服務器上的 將檢查與發送的專案匹配的專案是否存在于陣列中并將其洗掉。為此，您可以使用 forEach 查找專案并將其從陣列中洗掉。

    myArray.forEach((item,index) => {
if(item === itemToDelete){
myArray.splice(index, 1);
})

標籤：javascript 反应 sql服务器 表示

上一篇：為什么使用axiosPOST方法設定cookie時不存盤

下一篇：如何在自定義驗證器中使用async-await