Блог

Я использую React и Laravel для создания приложения. Мне удалось отобразить данные с помощью Axios в компоненте и выполнить отдельный поиск данных в другом компоненте с помощью этого кода :

 const [data,setData]=useState([]);
    
async function search(key)
    {
        console.warn(key)
        let result = await fetch("http://localhost:8000/api/search/" key);
        result = await result.json();
        console.warn(result)
        setData(result)
    }
 

Проблема в том, что мне не удается совместить поиск и отображение данных в одном компоненте. Как это сделать ? Я использую личный API Laravel.

JS Компонент отображения данных ( без поиска ):

 import React, { Component } from "react";
import axios from "axios";
import { Container, Dropdown, ListGroup, Button } from "react-bootstrap";
import { Table, Thead, Tbody, Tr, Th, Td } from "react-super-responsive-table";

class Patient extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      patients: [],
    };
  }

  componentDidMount() {
    axios
      .get("api/patients")
      .then((response) => {
        this.setState({ patients: response.data });
      })
      .catch((err) => console.log(err));
  }

  render() {
    return (
      <div>
        <Container>
         
          <div className="form-group">
            <label htmlFor="exampleInputEmail1">Search</label>
            <input
              type="text"
              className="form-control"
              id=" "
              placeholder="Search"
              id="name"
            />
          </div>

          <Table className="table table-hover">
            <Thead className="thead-light text-center">
              <Tr>
                <Th>ID</Th>
                <Th>NAME</Th>
                <Th>FIRST NAME</Th>
              </Tr>
            </Thead>
            <Tbody className="text-center">
              {this.state.patients.reverse().map((patient) => (
                <Tr>
                  <Td>
                    <b>{patient.id}</b>
                  </Td>
                  <Td>
                    <b>{patient.firstname}</b>
                  </Td>
                  <Td>
                    <b>{patient.lastname}</b>
                  </Td>
                </Tr>
              ))}
            </Tbody>
          </Table>
        </Container>
        );
      </div>
    );
  }
}

export default Patient;
 

Мой контроллер Laravel для поиска :

   public function search($key)
    {
        return Patient::where('name','Like',"%$key%")->get();
    }
 

Маршрут Ларавель :

 Route::get('/search/{key}/', [PatientController::class, 'search']);