Получение карты неопределенной ошибки для страницы результатов поисковой системы - PullRequest
Новая
       6

Получение карты неопределенной ошибки для страницы результатов поисковой системы

0 голосов
/ 31 марта 2020

Я получаю эту ошибку, когда она переходит к моему методу предложений.

Uncaught TypeError: Невозможно прочитать свойство 'map' of undefined в строке предложений 4

Кто-нибудь может помочь мне понять, почему, пожалуйста?

Я новичок, так что прости мое невежество. 

import React from 'react';

const Suggestions = props => {
  const options = props.results.map (r => (
    <li key={r.id}>
      {r.name}
    </li>
  ));
  return <ul className="ul-list">{options}</ul>;
};

export default Suggestions;

Вот остаток кода для строки поиска. Я удалил информацию API, но это было там. 

import React, {Component} from 'react';
import axios from 'axios';
import Suggestions from '../SearchBbg/suggestions';
import '../../style/searchbar.scss';

const API_KEY = '';
const API_URL = '';

class Search extends Component {
  state = {
    query: '',
    results: [],
  };

  getInfo = () => {
    axios
      .get (`${API_URL}?api_key=${API_KEY}&prefix=${this.state.query}&limit=7`)
      .then (({data}) => {
        this.setState ({
          results: data.data,
        });
      });
  };

  handleInputChange = () => {
    this.setState (
      {
        query: this.search.value,
      },
      () => {
        if (this.state.query && this.state.query.length > 1) {
          if (this.state.query.length % 2 === 0) {
            this.getInfo ();
          }
        } else if (!this.state.query) {
        }
      }
    );
  };

  render () {
    return (
      <form>
        <input
          className="search-bar"
          placeholder="Search for..."
          ref={input => (this.search = input)}
          onChange={this.handleInputChange}
        />
        <Suggestions results={this.state.results} />
      </form>
    );
  }
}

export default Search;

Ответы [ 2 ]

1 голос
/ 31 марта 2020

Я полагаю, вы уже уничтожены в своей собственности ax ios call data. Это может быть причиной, по которой вы получили undefined для props.results.

. Попробуйте следующее: 

getInfo = () => {
    axios
      .get(`${API_URL}?api_key=${API_KEY}&prefix=${this.state.query}&limit=7`)
      .then(({data}) => { // here already destructured
        this.setState ({
          results: data // removed => .data,
        });
      });
};

Дополнительно также стоит проверить значение null или undefined как props.results && props.results.map() перед использованием .map(), так что вы можете использовать как, просто чтобы быть уверенным: 

const Suggestions = props => {
  const options = props.results && props.results.map (r => (
    <li key={r.id}>
      {r.name}
    </li>
  ));
  return <ul className="ul-list">{options}</ul>;
};

Я надеюсь, что это проясняет!

0 голосов
/ 31 марта 2020

Ваш массив результатов не определен. Проверьте, передаете ли вы results в качестве реквизита для предложений, и если массив результатов не является неопределенным.

Редактировать:

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

...