Блог

Я новичок в react и работаю над reactjs с помощью laravel api.

Я разработал форму с использованием reactjs и планирую отправить данные формы в базу данных phpmyadmin, используя laravel в качестве api.

Проблема в том, что если я отправляю данные, я использую setState для очистки данных формы, но это не так; но данные вводятся в базу данных phpmyadmin. Я даже пытаюсь записать ответ от api в консоль, но на консоли браузера нет сообщения.

Вот мой код на конце реакции:

 import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

class Addstudent extends Component {
  state = {
    name: '',
    course: '',
    email: '',
    phone: '',
  };

  handleInput = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  saveStudent = async (e) => {
    e.preventDefault();

    const res = await axios.post(
      'http://localhost:8000/api/add-student',
      this.state
    );

    if (res.data.status === 200) {
      console.log(res.data.message);
      this.setState({
        name: '',
        course: '',
        email: '',
        phone: '',
      });
    }
  };

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-12">
            <div className="card">
              <div className="card">
                <div className="card-header">
                  <h4>Add Students</h4>
                  <Link to={'/'} className="btn btn-primary btn-sm float-end">
                    Back
                  </Link>
                </div>

                <div className="card-body">
                  <form onSubmit={this.saveStudent}>
                    <div className="form-group mb-3">
                      <label>Student Name</label>
                      <input
                        type="text"
                        name="name"
                        onChange={this.handleInput}
                        className="form-control"
                        placeholder="Enter Name"
                        value={this.state.name}
                      ></input>
                    </div>

                    <div className="form-group mb-3">
                      <label>Student Course</label>
                      <input
                        type="text"
                        name="course"
                        onChange={this.handleInput}
                        className="form-control"
                        placeholder="Enter Course"
                        value={this.state.course}
                      ></input>
                    </div>
                    <div className="form-group mb-3">
                      <label>Student Email</label>
                      <input
                        type="text"
                        name="email"
                        onChange={this.handleInput}
                        className="form-control"
                        placeholder="Enter Email"
                        value={this.state.email}
                      ></input>
                    </div>
                    <div className="form-group mb-3">
                      <label>Student Phone</label>
                      <input
                        type="text"
                        name="phone"
                        onChange={this.handleInput}
                        className="form-control"
                        placeholder="Enter Phone"
                        value={this.state.phone}
                      ></input>
                    </div>
                    <div className="form-group mb-3">
                      <button type="submit" className="btn btn-primary">
                        Save Student
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Addstudent;
 

На конце Laravel Вот код контроллера, обрабатывающего запрос post:

 <?php
namespace AppHttpControllersAPI;
use AppHttpControllersController;
use IlluminateHttpRequest;
use AppModelsStudent;

class StudentController extends Controller
{
    public function store(Request $request){
        $student = new Student;
        $student->name =$request->input('name');
        $student->course =$request->input('course');
        $student->email =$request->input('email');
        $student->phone =$request->input('phone');

        $student->save();

        return response()->json([
            'status'=> '200',
            'message'=>'Student Added Successfully',
        ]);
    }
}
 

Ваша функция handleInput перезаписывает ваше состояние только одним свойством, вы должны сохранить старые данные:

 this.setState(s => ({
  ...s,
  [e.target.name]: e.target.value,
}));
 

В противном случае вы никогда не отправите все значения в API, предполагая, что он там работает правильно

 if (res.data.status === 200) {
  console.log(res.data.message);
 

Это ведение журнала отлично подходит, если все работает хорошо, но вы также можете захотеть вести журнал, если что-то пойдет не так, чтобы вы могли заметить, что отправляете в базу данных не все значения:

 try {
   const res = await axios.post(
     'http://localhost:8000/api/add-student',
     this.state
   );
   // ... code using res
} catch(e) {
  console.error(e);
}