reactjs - React-Select Async loadOptions 未正确加载选项

Question

React Async Select loadoption 有时无法加载选项。在几组查询 react loadoptions 没有加载任何值之后，这是一个非常奇怪的现象，但我可以从日志中看到结果正确地来自后端查询。我的代码库完全是最新的， react 选择新版本并使用

"react-select": "^2.1.1"

这是我的 react 异步选择组件的前端代码。我确实在 getOptions 函数中使用 debounce 来减少后端搜索查询的数量。我想这应该不会造成任何问题。我想补充一点，我在这种情况下观察到，loadoptions serach 指示器(...)也没有出现这种现象。

import React from 'react';
import AsyncSelect from 'react-select/lib/Async';
import Typography from '@material-ui/core/Typography';
import i18n from 'react-intl-universal';

const _ = require('lodash');

class SearchableSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      searchApiUrl: props.searchApiUrl,
      limit: props.limit,
      selectedOption: this.props.defaultValue
    };
    this.getOptions = _.debounce(this.getOptions.bind(this), 500);
    //this.getOptions = this.getOptions.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.noOptionsMessage = this.noOptionsMessage.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleChange(selectedOption) {
    this.setState({
      selectedOption: selectedOption
    });
    if (this.props.actionOnSelectedOption) {
      // this is for update action on selectedOption
      this.props.actionOnSelectedOption(selectedOption.value);
    }
  }

  handleInputChange(inputValue) {
    this.setState({ inputValue });
    return inputValue;
  }

  async getOptions(inputValue, callback) {
    console.log('in getOptions'); // never print
    if (!inputValue) {
      return callback([]);
    }
    const response = await fetch(
      `${this.state.searchApiUrl}?search=${inputValue}&limit=${
        this.state.limit
      }`
    );
    const json = await response.json();
    console.log('results', json.results); // never print
    return callback(json.results);
  }

  noOptionsMessage(props) {
    if (this.state.inputValue === '') {
      return (
        <Typography {...props.innerProps} align="center" variant="title">
          {i18n.get('app.commons.label.search')}
        </Typography>
      );
    }
    return (
      <Typography {...props.innerProps} align="center" variant="title">
        {i18n.get('app.commons.errors.emptySearchResult')}
      </Typography>
    );
  }
  getOptionValue = option => {
    return option.value || option.id;
  };

  getOptionLabel = option => {
    return option.label || option.name;
  };

  render() {
    const { defaultOptions, placeholder } = this.props;
    return (
      <AsyncSelect
        cacheOptions
        value={this.state.selectedOption}
        noOptionsMessage={this.noOptionsMessage}
        getOptionValue={this.getOptionValue}
        getOptionLabel={this.getOptionLabel}
        defaultOptions={defaultOptions}
        loadOptions={this.getOptions}
        placeholder={placeholder}
        onChange={this.handleChange}
      />
    );
  }
}

export default SearchableSelect;

编辑以回复 Steve 的回答

谢谢你的回答，史蒂夫。还是没有运气。我尝试根据您的回复点进行回复。

1. 如果我不使用 optionsValue，而是使用 getOptionValue 和 getOptionLevel，则查询结果无法正确加载。我的意思是加载了空白选项，没有文本值。
2. 是的，你是对的，是一个返回字符串的同步方法，我不需要覆盖它。这工作正常并且 noOptionsMessage 显示正确。谢谢你指出这一点。
3. actionOnSelectedOption 不是 noop 方法，它可能需要执行一些责任。我尝试使用 SearchableSelect 作为独立组件，如果我需要一些后端操作来执行此功能，则会相应地触发该操作。例如，我在项目的用户配置文件中使用它，用户可以在其中从现有条目更新他的学校/学院信息。当用户选择一个选项时，需要执行配置文件更新责任。
4. 是的，你是对的。我不需要维护 inputValue 的状态，谢谢。
5. 我确实确保 defaultOptions 是一个数组。
6. 我在没有使用去抖的情况下进行了测试，但仍然没有运气。我正在使用去抖来限制后端调用，否则可能会对我肯定不想要的每个击键进行后端调用。

异步选择对于 2/3 查询完美工作，之后它突然停止工作。我观察到一种可区分的行为，对于这些情况，搜索指示符 (...) 也没有显示。

非常感谢您抽出时间。

编辑 2 以回应 Steve 的回答

非常感谢您再次的回复。我对 getOptionValue 和 getOptionLabel 的看法是错误的。如果 loadOptions 得到响应，这两个函数都会被调用。因此，我从之前的代码片段中删除了辅助选项值函数，并根据(也在这篇文章中)更新了我的代码片段。但仍然没有运气。在某些情况下，异步选择不起作用。我尝试对这样的情况进行截图。我确实在本地数据库名称“tamim johnson”中使用了名称，但是当我搜索他时，我没有得到任何响应，但从后端得到了正确的响应。这是这个案例的截图

我不确定这个屏幕截图有多清晰。塔米姆·约翰逊在我的排名中也排在第六位。

谢谢先生的宝贵时间。我不知道我做错了什么或错过了什么。

编辑 3 以回应 Steve 的回答

这是名为“tamim johnson”的用户搜索的预览选项卡响应。

Answer 1

我发现人们有意寻找这个问题。因此，我发布了修复该问题的代码的更新部分。从 async-await 转换为普通回调函数解决了我的问题。特别感谢史蒂夫和其他人。

import React from 'react';
import AsyncSelect from 'react-select/lib/Async';
import { loadingMessage, noOptionsMessage } from './utils';
import _ from 'lodash';

class SearchableSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: this.props.defaultValue
    };
    this.getOptions = _.debounce(this.getOptions.bind(this), 500);
  }

  handleChange = selectedOption => {
    this.setState({
      selectedOption: selectedOption
    });
    if (this.props.actionOnSelectedOption) {
      this.props.actionOnSelectedOption(selectedOption.value);
    }
  };

  mapOptionsToValues = options => {
    return options.map(option => ({
      value: option.id,
      label: option.name
    }));
  };

  getOptions = (inputValue, callback) => {
    if (!inputValue) {
      return callback([]);
    }

    const { searchApiUrl } = this.props;
    const limit =
      this.props.limit || process.env['REACT_APP_DROPDOWN_ITEMS_LIMIT'] || 5;
    const queryAdder = searchApiUrl.indexOf('?') === -1 ? '?' : '&';
    const fetchURL = `${searchApiUrl}${queryAdder}search=${inputValue}&limit=${limit}`;

    fetch(fetchURL).then(response => {
      response.json().then(data => {
        const results = data.results;
        if (this.props.mapOptionsToValues)
          callback(this.props.mapOptionsToValues(results));
        else callback(this.mapOptionsToValues(results));
      });
    });
  };

  render() {
    const { defaultOptions, placeholder, inputId } = this.props;
    return (
      <AsyncSelect
        inputId={inputId}
        cacheOptions
        value={this.state.selectedOption}
        defaultOptions={defaultOptions}
        loadOptions={this.getOptions}
        placeholder={placeholder}
        onChange={this.handleChange}
        noOptionsMessage={noOptionsMessage}
        loadingMessage={loadingMessage}
      />
    );
  }
}

export default SearchableSelect;