0

I keep getting this error when it kicks over to my Suggestion method.

Uncaught TypeError: Cannot read property 'map' of undefined in Suggestions line 4

365体育足球滚球比分Can anyone help me figure out why, please?

I am a newb so forgive my ignorance.

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;

Here is the rest of the code for the search bar. I removed api info but it was in there.

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;

  • 1
    Whats the value of props.results? Are you even passing the results prop correctly? Paste the code where you are passing the result prop – Muhammad Haseeb Mar 31 at 17:59
1

I believe you already destructred in your axios call data property. That might be the reason why you got undefined for props.results.

So try the following:

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,
        });
      });
};

Additionally also worth to check for null or undefined value like props.results && props.results.map() before using .map(), so you can use like just to be sure:

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>;
};

365体育足球滚球比分I hope this clarifies!

| improve this answer | |
  • 1
    thank you, i tried that and it seems to be working. – Jill Stemm Mar 31 at 18:38
0

Your results array is undefined. Check if you are passing results365体育足球滚球比分 as a prop to Suggestions and if results array is not undefined.

Edit:

365体育足球滚球比分Seems that you are assigning some null or undefined to results, the only way this happens is on your api response. Check if you are parsing server response correctly.

| improve this answer | |
  • I added it now, sorry. – Jill Stemm Mar 31 at 18:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.