Ошибка типа: не удается прочитать свойство 'map' из null, REACTJS и Axios - PullRequest
Новая
       5

Ошибка типа: не удается прочитать свойство 'map' из null, REACTJS и Axios

0 голосов
/ 24 апреля 2020

Я создаю панель поиска. Пользователь пишет свой запрос, и когда он нажимает кнопку поиска, он складывается в search, отправляется через Ax ios и возвращает результат в конце. Тем не менее, у меня хорошие результаты в моей консоли (код на оборотной стороне в порядке), но мне не удалось отобразить данные на моей странице, потому что, когда я добавляю эти строки в ответ 

                    <ul>
                      { this.state.filter.map(book => (
                        <li key={book.id}>{book.title},{book.author}</li>
                      ))}
                    </ul>

У меня ошибка: TypeError: Невозможно прочитать свойство 'map' из null. Что я могу изменить / добавить в своем коде, чтобы правильно отобразить результат моего запроса, пожалуйста? (Выкладываю картинку сети без карты)

network

import React, {Component} from 'react';
import {
    MDBContainer,MDBCol, MDBBtn, 
  } from 'mdbreact';
import "./acceuil.css";
import axios from 'axios';

class Acceuil extends Component{
  constructor(props){
    super(props);
    this.state = {
      search:'',
      filter: null,
      error:'',
    }
    this.searchTitle = this.searchTitle.bind(this);
  }

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

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

    .then(response => response.data)

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


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

    e.preventDefault();
  }

    render() {
        const container = {height:530};

        return(
            <div>
                <div className="searchPosition">
                  <MDBCol>
                    <div className="active-pink-3 active-pink-4 mb-4">
                      <input className="form-control" id="search" type="text" placeholder="Search" onChange={this.change} />
                    </div>
                  </MDBCol>
                </div>
                <div>
                  <MDBBtn  onClick={this.searchTitle(this.state.search)} color="dark" size="lg">Search</MDBBtn>

                <ul>
                  { this.state.filter.map(book => (
                  <li key={book.id}>{book.title},{book.author}</li>
                  ))}
                </ul>
            </div>

        );
    }
}

export default Acceuil;

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Вероятно, один из вариантов - проверить значения null перед использованием .map().

Попробуйте использовать && как указано ниже: 

<ul>
   { this.state.filter && this.state.filter.map(book => (
       <li key={book.id}>{book.title},{book.author}</li>
   ))}
</ul>

Надеюсь, это поможет!

1 голос
/ 24 апреля 2020

Один из способов решения этой проблемы - установить для заполнителя массив в конструкторе. 

constructor(props){
  super(props);
  this.state = {
    search:'',
    filter: [], // <== THIS CHANGED
    error:'',
  }
  this.searchTitle = this.searchTitle.bind(this);
}

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

this.state.filter ? this.state.filter.map(book => ...) : <em>Loading...</em>;
...