Блог

Привет я довольно новый, чтобы реагировать, и я пытаюсь создать студенческие управления приложение с помощью React в качестве frontend и я не могу показаться, чтобы получить страницу, чтобы получить список студентов, поскольку я пробовал работать с функциями useHistory и useNavigate с реагировать-маршрутизатор-дом, чтобы попытаться перенаправить на отдельного ученика компонент, но я не смог заставить их работать в моем проекте, поэтому я удалил их.

Страница отображала объекты учащихся из внутреннего API, который я создал, просто отлично, прежде чем я попытался реализовать две функции, но теперь не будет отображаться ни один объект учащихся, отображаются только заголовки таблиц, но не строки таблицы. Любая помощь в решении проблемы будет признательна

вот мой компонент hook для извлечения данных перед использованием useHistory amp; useNavigate

 function GetAllStudents() {
  const [students, setStudents] = useState([]);
  const fetchData = async () => {
    StudentService.getStudents() //axios service function used to fetch data
      .then((res) => res.json())
      .then((res) => {
        const currentStudent = res.data;
        setStudents(currentStudent); // try setStudents(res.data) if fails
      })
      .catch((err) => {
        console.log(err);
      });
    // fetchData();
  };

  useEffect(() => fetchData(), []);

  return (
    <div class="container">
      <div class="form container p-4">
        <h1>Week 10 - React Frontend </h1>
        <a href="/add" class="btn btn-success">
          Add Student
        </a>
      </div>

      <table class="table table-bordered">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {students.map((student) => (
            <tr key={student.id}>
              <td> {student.firstname} </td>
              <td> {student.lastname}</td>
              <td> {student.email}</td>
              <td>
                <button className="btn btn-info">Edit</button>
                <button
                  style={{ marginLeft: '10px' }}
                  className="btn btn-danger"
                  onclick="return confirm('Do you Really want to delete')">
                  Delete{' '}
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default GetAllStudents;
 

Когда я проверяю элементы в своем браузере, он показывает, что состояние не сохраняет объекты в массиве

Я не знаю, что я неправильно настроил, потому что даже когда я меняю функцию на компонент класса, который также ранее работал правильно, объекты больше не отображаются

 import React, { Component } from 'react';
import StudentService from '../services/StudentService';

class GetAllStudents extends Component {
  constructor(props) {
    super(props);

    this.state = {
      students: [],
    };
    this.addStudent = this.addStudent.bind(this);
    this.editStudent = this.editStudent.bind(this);
    this.deleteStudent = this.deleteStudent.bind(this);
  }

  deleteStudent(id) {
    StudentService.deleteStudent(id).then((res) => {
      this.setState({
        students: this.state.students.filter((student) => student.id !== id),
      });
    });
  }
  updateStudent(id) {
    this.props.history.push(`/students/${id}`); // props(parameter) to navigate to edit student component
  }
  editStudent(id) {
    this.props.history.push(`/edit/${id}`); // props(parameter) to navigate to edit student component
  }

  componentDidMount() {
    StudentService.getStudents().then((res) => {
      this.setState({ students: res.data }); //loads all students in database
    });
  }

  addStudent() {
    this.props.history.push('/add'); //function to navigate to edit student component with form to add student
  }

  render() {
    return (
      <div class="container">
        <div class="form container p-4">
          <h1>Week 10 - React Frontend </h1>
          <a href="/add" class="btn btn-success">
            Add Student
          </a>
        </div>

        <table class="table table-bordered">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Email</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {this.state.students.map((student) => (
              <tr key={student.id}>
                <td> {student.firstname} </td>
                <td> {student.lastname}</td>
                <td> {student.email}</td>
                <td>
                  <button
                    onClick={() => this.updateStudent(student.id)}
                    className="btn btn-info">
                    Edit
                  </button>
                  <button
                    style={{ marginLeft: '10px' }}
                    onClick={() => this.deleteStudent(student.id)}
                    className="btn btn-danger"
                    onclick="return confirm('Do you Really want to delete')">
                    Delete{' '}
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default GetAllStudents;
 

когда я проверяю свой сервер, он показывает, что на сервер поступают вызовы, но react не извлекает и не отображает данные

любая помощь в решении этой проблемы была бы признательна, так как в настоящее время я не знаю, что я сделал не так