React Async. Выберите loadoption, иногда не удается загрузить опцию.Это очень странное явление после того, как пара наборов запросов реагирует loadoptions не загружают никакие значения, но я вижу из журнала, что результаты правильно получены из внутреннего запроса.Моя кодовая база полностью обновлена с выпуском реагировать-выбрать новый выпуск и использовать
«реагировать-выбор": "^ 2.1.1"
Вот мой интерфейскод для реакции-асинхронного выбора компонента.Я использую debounce в своей функции getOptions, чтобы уменьшить количество поисковых запросов бэкэнда.Это не должно вызвать никаких проблем, я думаю.Я хотел бы добавить еще один момент, который я наблюдаю в этом случае, индикатор загрузки загрузки (...) также не появляется в этом явлении.
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;
Изменить до ответа Ответ Стива
Спасибо за ваш ответ, Стив.Все еще не повезло.Я пытаюсь ответить в соответствии с вашими точками ответа.
- Если я не использую optionsValue, лучше использовать getOptionValue и getOptionLevel, тогда результат запроса не загружается должным образом.Я имею в виду там пустые параметры загружены, без текстового значения.
- да, вы правы, это синхронный метод, возвращающий строку, мне не нужно переопределять это.И это работает нормально, и noOptionsMessage показывает правильно.Спасибо, чтобы указать на это.
- actionOnSelectedOption не является noop-методом, он может нести определенную ответственность за выполнение.Я пытаюсь использовать SearchableSelect в качестве независимого компонента, если мне нужно какое-то внутреннее действие, чтобы эта функция инициировала это соответственно.Например, я использую это в профиле пользователя моего проекта, где пользователь может обновить информацию о своей школе / колледже из существующих записей.Когда пользователь выбирает параметр, ответственность за обновление профиля лежит на нем.
- Да, вы правы.Мне не нужно поддерживать inputValue в состоянии, спасибо.
- Я уверен, что defaultOptions - это массив.
- Я тестирую без использования debounce, но все равно не повезло.я использую debounce, чтобы ограничить бэкэнд-вызов, иначе может быть бэкэнд-вызов для каждого нажатия клавиши, которое, конечно, мне не нужно.
асинхронный выбор отлично работает для 2/3 запросов, после чего он внезапно перестает работать.Одно различимое поведение я наблюдаю, что для этих случаев поисковые индикаторы (...) также не отображаются.
Большое вам спасибо за ваше время.
Редактировать 2 в ответе Ответ Стива
Большое спасибо за ваш ответ еще раз.Я был не прав насчет getOptionValue и getOptionLabel.Если loadOptions получил ответ, то обе эти функции вызваны.Поэтому я удалил свою вспомогательную функцию optionsValue из моего предыдущего фрагмента кода и обновил свой фрагмент кода в соответствии с (В этом посте также).Но все равно не повезло.В некоторых случаях async-select не работал.Я пытаюсь сделать скриншот одного из таких случаев.Я использую имя в названии local-db "tamim johnson", но когда я искал его, я не получил никакого ответа, но получил правильный ответ от back-end.Вот скриншот этого случая 
Я не уверен, насколько ясен этот скриншот.Тамим Джонсон также на 6-й позиции в моем рейтинге.
Спасибо, сэр, за ваше время.Я понятия не имею, что я делаю неправильно или что-то упускаю.
Редактировать 3 в ответе ответа Стива
Это ответ на вкладке предварительного просмотра для поиска пользователя с именем "tamim johnson".
