React fetch returns undefined but in console it returns array

Question

I am using react-autosuggest I try to fetch the results from the server

getSuggestions (value) {
  const escapedValue = escapeRegexCharacters(value.trim());

  if (escapedValue === '') {
  return [];
  }

  const regex = new RegExp('^' + escapedValue, 'i');
    if (!value) {
        return Promise.resolve(myArr);
    }
  fetch(`/mypoint`)
    .then((response) => response.json())
    .then((users) => {
    if (users == undefined) {

      return []
    } else {

      return users
    }
    })
  .catch(err => {
    console.log(err)
  })


 }

This returns users from server when i console log it, no problem

  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      isLoading: false,
      suggestions: this.getSuggestions(value),
    });
  };

This gets suggested values from the above function however when I write a word to input field

The prop suggestions is marked as required in Autosuggest, but its value is undefined.

I get suggestions as undefined even though it console the returned values from the server

So the return inside fetch returns undefined what should I do any suggestions!

where do you render your component ?

Abslen Char
– Abslen Char

2018-04-03 10:48:13 +00:00
Commented Apr 3, 2018 at 10:48 — Abslen Char
– Abslen Char, Commented Apr 3, 2018 at 10:48
Inside the same component as the functions

Kaan Bursa
– Kaan Bursa

2018-04-03 10:50:07 +00:00
Commented Apr 3, 2018 at 10:50 — Kaan Bursa
– Kaan Bursa, Commented Apr 3, 2018 at 10:50

RIYAJ KHAN · Accepted Answer · 2018-04-03 11:24:48Z

1

Its asynchronous API handling issue.In getSuggestions,you are returning nothing.return statement inside fetch callback will not return to onSuggestionsFetchRequested for setState.By default getSuggestions returning undefined.

Solutions:

Either you do

promise chaining or
pass callback whichever you find better.

Solution using callback:

function getSuggestions(value, callback) {

      return fetch(`/mypoint`).then((response) => response.json()).then((users) => {
        if (users == undefined) {

          callback(null, []);
        } else {

          callback(null, users);
        }
      }).catch(err => {
        callback(err);
      })

    }

function : onSuggestionsFetchRequested

onSuggestionsFetchRequested = ({value}) => {

  getSuggestions = (value, (err, data) => {
    this.setState({isLoading: false, suggestions: data});
  });

};

answered Apr 3, 2018 at 11:24

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RIYAJ KHAN Over a year ago

@Kaan please upvote and accept it if it's working for you

Collectives™ on Stack Overflow

React fetch returns undefined but in console it returns array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related