Как удалить данные из базы данных с помощью React js и REST API

Question

Я изучаю REST API. Я использую приложение «Реакция» для внешнего интерфейса и сервера для Node js и express сервера. Для API я использую REST API. Я использую MongoDB для базы данных. Я успешно отображаю все данные в браузере. Я могу искать данные. Теперь я хочу удалить данные. Я не знаю, как удалить данные из конечной точки API REST. Я буду очень рад, если кто-нибудь поможет мне. Я проверил свой бэкэнд с помощью Почтальона. Все работает нормально, как и ожидалось.

Это моя конечная точка удаления бэкэнда

app.delete("/students/:id", async (req, res, next) => {
  const id = req.params.id;

  try {
    student
      .remove({ _id: id })
      .exec()
      .then(data => {
        res.json(data);
      });
  } catch (error) {
    console.log(error);
  }
});

Я экспортирую свои конечные точки API в React js

 export async function deleteStudent(id) {
  const response = await fetch(`/students/${id}`, {
    method: "DELETE"
  });
  return response.json();
}

Это основной компонент, где я хочу удалить данные

 import React, { useState, useEffect } from "react";
import { logEntry } from "../Api/Api";
import { deleteStudent } from "../Api/Api";

function Datatable() {
  const [total, settotal] = useState([]);
  const [searchItem, setsearchItem] = useState({
    item: ""
  });
  const [data, setdata] = useState([]);

  const handleChange = e => {
    setsearchItem({ item: e.target.value });
  };

  const getEntries = async () => {
    const logEntries = await logEntry();

    console.log(logEntries);
    settotal(logEntries.count);
    setdata(logEntries.students);
  };

  const nameFilter = data.filter(list => {
    return list.name.toLowerCase().includes(searchItem.item.toLowerCase());
  });

  const deleteData = async id => {
    await deleteStudent(id);
  };

  useEffect(() => {
    getEntries();
  }, []);
  return (
    <div>
      <div style={{ paddingLeft: "800px" }}>
        <input
          placeholder="Search student"
          onChange={handleChange}
          style={{ width: "200px", height: "30px" }}
        />
      </div>
      <p>Total student: {total} </p>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>City</th>
            <th>Address</th>
            <th>Phone</th>
            <th>Email</th>
          </tr>
        </thead>

        <tbody>
          {nameFilter === "" ? (
            <p>Student not found</p>
          ) : (
            nameFilter.map(list => {
              return (
                <tr>
                  <td>{list.name}</td>
                  <td>{list.city}</td>
                  <td>{list.address}</td>
                  <td>{list.phone}</td>
                  <td>{list.email}</td>
                  <td>
                    <a
                      className="waves-effect red btn-small"
                      onClick={() => deleteData(list.id)}
                    >
                      Delete
                    </a>
                  </td>
                </tr>
              );
            })
          )}
        </tbody>
      </table>
    </div>
  );
}

export default Datatable;

Не знаю, я делаю?

Answer 1

Это выглядит как отличное начало! Я работаю при том понимании, что вам нужно каким-то образом передать id из student, который вы хотите удалить, в URL в deleteStudent() с помощью кнопки «УДАЛИТЬ» в вашем <DataTable> компоненте.

Итак, во-первых, давайте проведем рефакторинг вашей deleteStudent() функции:

export async function deleteStudent(id) {
  const response = await fetch(`/students/${id}`, {
    method: "DELETE",
  });
  return response.json();
}

Вам не нужно отправлять какие-либо данные с помощью запроса DELETE, вам просто нужно нажать правильный URL-адрес на основе id, который мы можем передать в метод и динамически включить в вызов fetch().

Теперь вам нужно найти способ передать этот id в функцию deleteStudent(). Из того, что я вижу, вы извлекаете данные о студентах здесь (я перефразировал это):

const getEntries = async () => {

    // students are pulled in, I'm assuming they have an 'id' property that corresponds to the 'id' that MongoDB has them stored under
    const logEntries = await logEntry();

    // and now data references the students
    setdata(logEntries.students);

  };

Похоже, тогда вы фильтруете студентов здесь:

const nameFilter = data.filter(list => {
  return list.name.toLowerCase().includes(searchItem.item.toLowerCase());
});

А затем визуализируйте отфильтрованных студентов с помощью вызова .map (). Здесь вы можете передать id в обработчик onClick, предполагая, что у вас действительно есть поле id на этих list элементах. Если вы этого не сделаете, то вам нужно будет найти способ добавить id в к этим данным:

nameFilter.map(list => {
  return (
    <tr>
      <td>{list.name}</td>
      <td>{list.city}</td>
      <td>{list.address}</td>
      <td>{list.phone}</td>
      <td>{list.email}</td>
      <td>
        <a
          className="waves-effect red btn-small"
          onClick={() => deleteData(list.id)} // this is where the id should get passed on to the handler, and then dynamically included in the DELETE /students/:id url
        >
          Delete
        </a>
      </td>
    </tr>
  );
})

Затем в вашей функции deleteData() вы получите id в качестве параметра, и вы можете вызвать функцию deleteStudent(id), чтобы сделать запрос к бэкэнду:

const deleteData = async id => {
  await deleteStudent(id);
};

Есть некоторые другие вещи, которые требуют работы, но у вас общая идея верна! Ниже я дам несколько советов по дальнейшим улучшениям.

Должны ли они быть отдельными или их можно комбинировать?

import { logEntry } from "../Api/Api";
import { deleteStudent } from "../Api/Api";

Может быть, очистить обработчик маршрута DELETE:

app.delete("/students/:id", async (req, res, next) => {

  const id = req.params.id;

  try {
    // generally, Mongoose Model's are represented with TitleCase
    Student
      .remove({ _id: id })
      .exec() // is this needed? https://mongoosejs.com/docs/api/model.html#model_Model-remove
      .then(data => {
        res.json(data);
      });
  } catch (error) {
    console.log(error);
  }
});

Кажется, что в этой таблице данных есть некоторые дополнительные состояния / зацепки:

function Datatable() {

  // ... bunch of code

  // do you need state for this?
  const [removeStudent, setremoveStudent] = useState([]);

  // ... more code

  const getEntries = async () => {

    // ... 

    setremoveStudent(deleteData); // not sure this is needed...
  };