Question

我正在使用react-autosuggest我尝试从服务器获取结果

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


 }

当我登录时，这会从服务器返回用户，没问题

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

当我写的时候，这会从上面的函数中获得建议的值输入字段的单词

道具suggestions在Autosuggest标记为必需，但其值为undefined。

我将建议视为未定义，即使它从服务器控制返回的值

因此fetch中的返回返回undefined我应该做什么建议！

Answer 1

其asynchronous API handling问题。在getSuggestions中，您没有返回任何内容。return内的fetch callback语句不会返回onSuggestionsFetchRequested setState 。默认getSuggestions返回undefined。

<强>解决方案：

要么你做

承诺链接或
传递回拨，无论您找到哪个更好。

使用回调的解决方案：

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

    }

功能：onSuggestionsFetchRequested

onSuggestionsFetchRequested = ({value}) => {

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

};

React fetch返回undefined但在控制台中返回数组

1 个答案: