Ошибка: необработанное отклонение (TypeError): невозможно прочитать свойство 'livres' из неопределенного, ReactJS, поиск - PullRequest
Новая
       14

Ошибка: необработанное отклонение (TypeError): невозможно прочитать свойство 'livres' из неопределенного, ReactJS, поиск

0 голосов
/ 03 мая 2020

console result Я создаю панель поиска. Пользователь пишет свой запрос, и когда он нажимает соответствующую кнопку фильтра, он складывается в search, отправляется через Ax ios и возвращает результат в конце. Однако у меня хорошие результаты в моей консоли (код в конце все в порядке), но мне не удалось отобразить данные на моей странице только при попытке с фильтром редактирования (с фильтром заголовка все в порядке). У меня есть эта ошибка: необработанное отклонение (TypeError): невозможно прочитать свойство 'livres' из неопределенного. Что я могу объявить / изменить в моем коде, пожалуйста? 

import React, {Component} from 'react';
import {
    MDBContainer,MDBCol, MDBBtn, 
  } from 'mdbreact';
import "./accueil.css";
import axios from 'axios';
import {  MDBDropdown,
  MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem,  } from "mdbreact";



class HomePage extends Component{
    constructor(props){
        super(props);
        this.state = {
      search:'',//va contenir la valeur entrée dans la barre de recherche
      filter: [],//va contenir les resultats de la recherche
      error:'',//va contenir l'erreur en cas d'erreur
        }
        this.searchTitle = this.searchTitle.bind(this);
        this.searchEdition = this.searchEdition.bind(this);
    }

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

  //search with the title filter
  searchTitle = (search) => e => {
    console.log(search);
    let formData = new FormData();
    formData.append("title",search);
    const url = "http://localhost:8888/API/Accueil/recherche_titre.php"
    axios.post(url, formData)

    .then(response => response.data)

    .then((data) => {
      this.setState({filter: data.results.livres});
      console.log(this.state.filter)
    })


    setTimeout(() => {
      this.setState({
        error: '',
      });
    }, 2000);

    e.preventDefault();
  }

  //search with the edition filter
  searchEdition = (search) => e => {
    console.log(search);
    let formData = new FormData();
    formData.append("edition",search);
    const url = "http://localhost:8888/API/Accueil/recherche_edition.php"
    axios.post(url, formData)


    .then((data) => {
      this.setState({filter: data.results.livres});
      console.log(this.state.filter)
    })


    setTimeout(() => {
      this.setState({
        error: '',
      });
    }, 2000);

    e.preventDefault();
  }

    render() {
        return(
            <div>
            <div className="searchPosition">
              <MDBCol>
                <div className="active-pink-3 active-pink-4 mb-4">
                  <input className="form-control" type="text" placeholder="Search..." aria-label="Search" />
                </div>
              </MDBCol>
            </div>
            <br></br>
            <div >
            <ul className="ulFilter">
            <li className="liFilter">Choose a filter  </li>
            <li className="liFilter">
              <MDBBtn  onClick={this.searchTitle(this.state.search)} color="dark" size="lg">Titre</MDBBtn>
            </li>
            <li className="liFilter">
              <MDBBtn  onClick={this.searchEdition(this.state.search)} color="dark" size="lg">Edition</MDBBtn>
            </li>
            </ul>
            <ul className="resultsSearch"> 
                  { this.state.filter ? this.state.filter.map(book => (
                      <li className=".liResults" key={book.id}>{book.title},{book.edition}</li>
                  )) : <em>Loading</em>}
                </ul>

        </div>
      </div>

        );
    }
}

export default HomePage;

1 Ответ

0 голосов
/ 03 мая 2020

Похоже, вы пропустили этот шаг при обработке ответа в searchEdition: 

.then(response => response.data)
...