Кнопка «Редактировать» + заполнить поле ввода (PUT METHOD / PUT REQUEST) - PullRequest
Новая
       19

Кнопка «Редактировать» + заполнить поле ввода (PUT METHOD / PUT REQUEST)

1 голос
/ 29 марта 2020

Я создаю одно приложение, в котором серверная часть - Node js, сервер - express сервер, Postgresql база данных и запрос соединения для базы данных и моделей, REST API. Я проверил мое приложение POSTMAN. Мое приложение отлично работает с бэкэнда, а также все методы CRUD. Я использовал React js для внешнего интерфейса. Я успешно могу отображать, добавлять и удалять данные из базы данных. Но я застрял в обновлении данных. Я впервые использую метод PUT. Я действительно не знаю, как редактировать действительные данные. Визуализация моего приложения . Прочитав пару статей, я сделал приложение таким. Я буду очень рад, если кто-нибудь поможет мне. Это репозиторий Gitlab моего проекта .

Это мое приложение. js, где я использую реактив-дом, перенаправляющий редактирование на компонент UpdateStudent 

import React from "react";
import Dashboard from "./components/Dashboard/Dashboard";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import UpdateStudent from "./components/UpdateStudent/UpdateStudent";
import Datatable from "./components/Datatable/Datatable";
function App() {
  return (
    <div>
      <Router>
        <Dashboard />
        <Switch>
          <Route exact path="/students" component={Datatable} />
          <Route path="/edit/:id" component={UpdateStudent} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

Это API, которые я импортировал от бэкэнда к фронту 

   export async function logEntry() {
  const response = await fetch("/students");
  return response.json();
}
export async function singleStudent(id) {
  const response = await fetch(`/students/${id}`);
  return await response.json();
}

export async function updateStudent(id, studentToUpdate) {
  const response = await fetch(`/students/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(studentToUpdate)
  });
  return await response.json();
}

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

Это основной компонент, где я отображаю все данные. Я успешно внедряю кнопку удаления logi c. Но после нажатия кнопки редактирования он показывает вот так (изображение) , что выглядит довольно странно. 

import React, { useState, useEffect } from "react";
import { logEntry, deleteStudent, updateStudent } from "../Api/Api";
import { Link } from "react-router-dom";
import UpdateStudents from "../UpdateStudent/UpdateStudent";

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 deleteData = async id => {
    //console.log(id);
    await deleteStudent(id);
  };

  const update = async id => {
    console.log(id);
    await updateStudent(id);
  };
  useEffect(() => {
    getEntries();
  }, []);

  return (
    <div>
      <div style={{ paddingLeft: "800px" }}>
        <input
          placeholder="Search student"
          onChange={e => handleChange(e)}
          style={{ width: "200px", height: "30px" }}
          value={searchItem.item}
        />
      </div>
      <p>Total student: {total} </p>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>City</th>
            <th>Address</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Date of birth</th>
            <th>Zipcode</th>
          </tr>
        </thead>

        <tbody>
          {data
            .filter(student => {
              return student.name
                .toLowerCase()
                .includes(searchItem.item.toLowerCase());
            })
            .map(student => {
              return (
                <tr>
                  <td>{student.name}</td>
                  <td>{student.city}</td>
                  <td>{student.address}</td>
                  <td>{student.phone}</td>
                  <td>{student.email}</td>
                  <td>{student.birthday}</td>
                  <td>{student.zipcode}</td>
                  <td>
                    <a
                      className="waves-effect red btn-small"
                      onClick={() => deleteData(student.id)}
                    >
                      Delete
                    </a>
                  </td>
                  <td>
                    <Link
                      to={"/edit/" + student.id}
                      className="btn btn-primary"
                    >
                      Edit //THIS IS THE EDIT BUTTON WHERE I WANT TO POPULATE THE INPUT FIELD AND EDIT THE DATA.
                    </Link>
                  </td>
                </tr>
              );
            })}
        </tbody>
      </table>
    </div>
  );
}

export default Datatable;

Это поле ввода обновления, где оно будет направить компонент обновления. Я не знаю, как заполнить поле. 

import React, { useState, useEffect } from "react";
import { updateStudent, singleStudent } from "../Api/Api";

function UpdateStudents() {
  const [student, setStudent] = useState({
    name: "",
    birthday: "",
    address: "",
    zipcode: "",
    city: "",
    phone: "",
    email: ""
  });

  return (
    <React.Fragment>
      <div className="app">
        <div className="row">
          <form className="col s12">
            <div className="row">
              <div className="input-field col s3">
                <input id="name" type="text" data-length="4" />
                <label htmlFor="input_text">Name</label>
              </div>
            </div>
            <div className="col">
              <div className="input-field col s12">
                <input id="birthday" type="date" data-length="4" />
                <label htmlFor="input_text">Date of birth</label>
              </div>
            </div>
            <div className="row">
              <div className="input-field col s3">
                <input id="address" type="text" data-length="4" />
                <label htmlFor="input_text">Address</label>
              </div>
            </div>
            <div className="col">
              <div className="input-field col s12">
                <input id="zipcode" type="number" data-length="4" />
                <label htmlFor="input_text">Zipcode</label>
              </div>
            </div>
            <div className="row">
              <div className="input-field col s3">
                <input id="city" type="text" data-length="4" />
                <label htmlFor="input_text">City</label>
              </div>
            </div>
            <div className="col">
              <div className="input-field col s12">
                <input id="phone" type="tel" data-length="4" />
                <label htmlFor="input_text">Phone</label>
              </div>
            </div>
            <div className="row">
              <div className="input-field col s3">
                <input id="email" type="text" data-length="4" />
                <label htmlFor="input_text">Email</label>
              </div>
            </div>
            <button
              className="btn waves-effect blue lighten-1"
              type="submit"
              name="action"
            ></button>
          </form>
        </div>
      </div>
    </React.Fragment>
  );
}

export default UpdateStudents;
...