Не загружайте параметры при первоначальном рендеринге

У меня на странице тонна select, и я не хочу, чтобы вызовы API для всех из них запускались каждый раз при загрузке страницы. Как я могу пропустить loadOptions при инициализации асинхронных react-select компонентов?


reactjs react-select
person Michael Terry    schedule 03.04.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Согласно документации, похоже, вы можете указать autoload={false}. Из документации:

Если вы не укажете свойство autoload = {false}, элемент управления автоматически загрузит набор параметров по умолчанию (например, для ввода: '') при его монтировании.

Обновлено:

Чтобы обойти проблему, когда вам нужно что-то напечатать, вы можете добавить onFocus обратный вызов. Это срабатывает, когда компонент "реакция-выбор" щелкает или вкладывается в него, вместо того, чтобы ждать, пока пользователь что-то напечатает. Это может выглядеть примерно так:

<ReactSelect
  ...otherProps
  onFocus = { this.fetchData }
/>

Чтобы предотвратить постоянную повторную выборку данных, вы можете отслеживать, были ли данные извлечены где-то в состоянии. Вы можете объявить начальное состояние как fetched: false, а затем в функции, которая загружает параметры, установите this.setState({ fetched: true }). Наконец, ваша fetchData функция может проверять this.state.fetched перед запросом новых данных.

person Adam Berman    schedule 03.04.2018
comment
Черт, я действительно думал, что это сработает. К сожалению, теперь он не показывает параметры, когда вы просто нажимаете кнопку выбора, но требует, чтобы вы вводили какие-либо данные перед выборкой параметров. - person Michael Terry; 03.04.2018
comment
Один из способов обойти это - принудительная выборка в обратном вызове onFocus. Пример кода в обновленном ответе выше. - person Adam Berman; 03.04.2018
comment
Использование onFocus - хорошая идея, но я не могу запустить ни этот обратный вызов, ни onClick. Похоже, что другие люди тоже борются с этим, оказывается: github.com/JedWatson / response-select / issues / 1525. Что-то, что работает, но кажется уродливым, улавливает события щелчка в контейнере div, находит ввод с помощью ReactDOM.findDOMNode(this).querySelector('input'), а затем размывает и фокусирует его. Это вызывает запуск поиска и его отображение в раскрывающемся списке. - person Michael Terry; 03.04.2018
comment
Хорошая находка! Это ... раздражает, ха-ха. Удачи вам с проектом, надеюсь, команда react-select скоро это исправит. - person Adam Berman; 03.04.2018

arrow_upward
1
arrow_downward 

state= {option1:'', option2:'', option3:''}

Если заполнен вариант 1, выберите значения # 2.

this.state.option1 && apicall for option 2().

Если заполнен вариант 2, выберите значения # 3.

this.state.option2 && apicall for option 3().

Все это можно в componentDidMount()

Это предполагает, что когда пользователь выбирает значение, вы сохраняете это значение в состоянии.

person Omar    schedule 03.04.2018