React fetch返回undefined但控制台显示数组，react-autosuggest请求异常

首先，你的getSuggestions函数返回undefined的核心原因有两个：

1. 未返回异步请求的Promise #

fetch是异步操作，你的函数里执行了fetch但没有把它的Promise返回出去。函数执行到最后没有任何return语句，自然会返回undefined——哪怕fetch内部拿到了用户数组，也没法传递给调用方。

2. React Autosuggest的异步处理逻辑错误 #

默认情况下，getSuggestions被设计为同步函数，它期望立即返回建议结果。如果要做异步请求（比如从服务器拉数据），不能直接在getSuggestions里写异步逻辑，而是要通过组件提供的onSuggestionsFetchRequested和onSuggestionsClearRequested事件来处理，手动管理建议列表的状态。

另外，你的代码里还有个逻辑冗余问题：前面已经判断escapedValue === ''时返回[]，后面又判断!value返回Promise.resolve(myArr)——当value为空时，escapedValue也必然是空，后面的判断永远不会执行，这个分支可以删掉。

修复后的完整代码示例 #

第一步：组件状态管理 #

首先在组件的state里添加value（输入框的值）和suggestions（建议列表）：

class YourComponent extends React.Component {
  state = {
    value: '',
    suggestions: []
  };

  // 辅助函数：转义正则特殊字符
  escapeRegexCharacters = (str) => {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  };
}

第二步：封装异步请求函数 #

把获取建议的逻辑抽成单独的函数，确保返回Promise：

fetchSuggestions = (value) => {
  const trimmedValue = value.trim();
  const escapedValue = this.escapeRegexCharacters(trimmedValue);

  // 如果输入为空，直接返回空数组
  if (escapedValue === '') {
    return Promise.resolve([]);
  }

  // 发起请求并处理结果
  return fetch(`/mypoint`)
    .then((response) => {
      // 先检查请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      return response.json();
    })
    .then((users) => {
      // 如果返回的用户数组不存在，返回空数组
      if (!users || !Array.isArray(users)) {
        return [];
      }
      // 根据输入值过滤结果（这里假设用户对象有name字段，根据你的实际数据调整）
      const regex = new RegExp(`^${escapedValue}`, 'i');
      return users.filter(user => regex.test(user.name));
    })
    .catch(err => {
      console.error('获取建议失败：', err);
      return []; // 出错时返回空数组，避免组件崩溃
    });
};

第三步：绑定Autosuggest的异步事件 #

使用onSuggestionsFetchRequested触发请求，更新状态；用onSuggestionsClearRequested清空建议：

onSuggestionsFetchRequested = ({ value }) => {
  this.fetchSuggestions(value).then(suggestions => {
    this.setState({ suggestions });
  });
};

onSuggestionsClearRequested = () => {
  this.setState({ suggestions: [] });
};

第四步：渲染Autosuggest组件 #

把状态和事件绑定到组件上：

render() {
  const { value, suggestions } = this.state;

  // 配置输入框属性
  const inputProps = {
    value,
    onChange: (event, { newValue }) => {
      this.setState({ value: newValue });
    }
  };

  return (
    <Autosuggest
      suggestions={suggestions}
      onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
      onSuggestionsClearRequested={this.onSuggestionsClearRequested}
      // 根据你的数据结构，返回建议项的显示值
      getSuggestionValue={(suggestion) => suggestion.name}
      // 渲染单个建议项
      renderSuggestion={(suggestion) => (
        <div>{suggestion.name}</div>
      )}
      inputProps={inputProps}
    />
  );
}

这样修改后，当用户输入内容时，onSuggestionsFetchRequested会触发异步请求，拿到结果后更新state.suggestions，Autosuggest组件就会自动渲染建议列表了。

内容的提问来源于stack exchange，提问作者Kaan Bursa