В React, как правильно установитьState внутри функции .map для ограничения параллельных HTTP-запросов - PullRequest
Новая
       16

В React, как правильно установитьState внутри функции .map для ограничения параллельных HTTP-запросов

0 голосов
/ 27 марта 2019

Так что, в принципе, у меня есть компонент "ShowTaskStatus", который покажет, сколько открытых задач, сколько закрытых и общее.Этот результат я получаю путем размещения на моей конечной точке сервера запросов.В моей информационной панели ShowTaskStatus может отображаться несколько раз, и результаты будут видны для каждой строки таблицы.Может быть до 50 различных областей, и запрос довольно сложный.Результат для каждой строки представляется, как только он становится доступен, без ожидания извлечения других областей.

Панель инструментов

Область |Открыть |Закрыто |Всего

  • Площадь1 |10 |20 |30
  • Area2 |12 |28 |40
  • AreaX |XX |ГГ |ZZ
  • ...

Так что проблема в том, что процесс, который обрабатывает запрос, не может обработать столько запросов, и поэтому я хочу ограничить, сколько "активных" HTTPMethods может бытьвыполняется перед извлечением новой области. 

//initial queryProcs = 0

var that = this;

var areaRows = areas.map(function(area) {

  //some other code

  isLoading[area] = true;
  this.setState({ 
    isLoading : isLoading 
  });

  // so check how many requests are running
  if (that.state.queryProcs < 5) {

    // only after state is set, execute POST
    that.setState({
      queryProcs: queryProcs + 1,
    }, () => {
      POST('/TastStatus', queryParameters, function(response) {

          // This code is executed when POST returns a response
          //dome something here

          isLoading[area] = false;

          //trigger a rerender by setting state with the query result
          //and also decrease the counter so another free query process is available
          that.setState(prevState => ({ 
            queryProcs: prevState.queryProcs - 1,
            isLoading: isLoading
            //...
          }));

      }, function(error, errorText) {
          //some error handling

          //free up another query process
          self.setState(prevState => ({ 
            queryProcs: prevState.queryProcs - 1,
            //...
          }));  
      });
    })
  }
});

, поэтому очевидно, что это не работает, поскольку у состояния никогда не будет возможности быть в курсе событий в течение цикла карты, а ответ POST в любом случае будет асинхронным.

Ну, я думаю, я мог бы просто собрать свои данные на карте и установить вне ее.Затем данные будут содержать полный результат по всем областям, но я потеряю функцию «построчно» для загрузки результатов.

У кого-нибудь есть предложения?

Ответы [ 2 ]

0 голосов
/ 31 марта 2019

Это легко, если вы используете какое-либо глобальное управление состоянием, такое как 'redux', а также реагирование. вы можете получить управление рендерингом компонентов в соответствии с ответами, обновив это глобальное состояние.

0 голосов
/ 31 марта 2019

Я не нашел решения для этого, вероятно, - как сказал Никос в своих комментариях, - в любом случае, это не лучшая практика.

Я переписал код сейчас, чтобы заполнить массив очередей.Затем эта очередь будет обработана потоковой функцией, которая вызывается и проверяется через тайм-аут.

спасибо

...