Реакция. js Обновление состояния, когда задействованы несколько конечных точек API - PullRequest
Новая
       7

Реакция. js Обновление состояния, когда задействованы несколько конечных точек API

0 голосов
/ 17 апреля 2020

Я сейчас пытаюсь заставить проект работать, чтобы проверить некоторые вещи, и я застрял в точке, где я пытаюсь правильно обновить состояние.

У меня есть доступ к конечной точке через ax ios .get "/ docker / Containers", который будет возвращать массив для всех идентификаторов контейнеров, которые в настоящее время работают в моей системе, это делается так: 

componentDidMount() {
        this.interval = setInterval(() => this.updateContainers(), 3000);
    };

    componentWillUnmount() {
        clearInterval(this.interval);
    }

На данный момент мое состояние выглядит следующим образом this: 

state = {
   'containers': [{id: 'id1'}, {id: 'id2'}]
}

Пользовательский интерфейс затем просто показывает список идентификаторов.

Затем я могу нажать на идентификатор в моем пользовательском интерфейсе, и он установит наблюдателя: 

state = {
   'containers': [{id: 'id1', watcher: true}, {id: 'id2'}]
}

Смысл наблюдателя таков, что в следующем цикле обновления будет получена более подробная информация о конкретном контейнере. 

state = {
   'containers': [{id: 'id1', watcher: true, name: 'container1'}, {id: 'id2'}]
}

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

state = {
   'containers': [{id: 'id1', watcher: false}, {id: 'id2'}]
}

Я застрял в том, как получить более подробную информацию. Мой метод updateContainers состоит из 3 шагов:

  1. Считайте ответ от API и разбейте состояние на отдельные переменные, сравните состояние var с ответом var и удалите все контейнеры, которые вышли из строя ( здесь не задано setState).

  2. Добавьте все новые контейнеры из ответа в состояние, которое с тех пор возникло (снова нет setState).

... Пока все хорошо ...

L oop через отфильтрованный массив контейнеров из шагов 1 и 2 и найдите все контейнеры, в которых установлен наблюдатель. Где это установлено, выполните вызов API, чтобы получить более подробную информацию. Наконец, установите состояние.

На шаге 3 я использую forEach для отфильтрованного массива, а затем выполняю ax ios .get для "/ docker / container / id1", где был установлен наблюдатель. в противном случае просто сохраните детали контейнера, которые у меня уже есть, но вот где я застрял, Typescript также выдает мне ошибку «TS2322: тип« void »не может быть назначен типу« IndividualContainer [] »». в настоящее время у меня есть: 

updateContainers() {
        axios.get('/docker/containers')
            .then(response => {
                const apiRequestedContainers: string[] = response.data.containers; // array of only IDs
                const stateContainers: IndividualContainer[] = [...this.state.containers];
                // remove dead containers from state by copying still live containers
                let filteredContainers: IndividualContainer[] = [...this.filterOutContainers(stateContainers, apiRequestedContainers)];
                // add new containers
                filteredContainers = this.addContainerToArray(filteredContainers, apiRequestedContainers);

                return this.updateContainer(filteredContainers);
            })
            .then(finalArray => {
                const newState: CState = {'containers': finalArray};
                this.setState(newState);
            });
    };

updateContainer(containers: IndividualContainer[]) {
        const returnArray: IndividualContainer[] = [];
        containers.forEach(container => {
            if (container.watcher) {
                axios.get('/docker/containers/' + container.id)
                    .then(response => {
                        // read currently available array of containers into an array
                        const resp = response.data;
                        resp['id'] = container.id;
                        resp['watcher'] = true;
                        returnArray.push(resp);
                    });
            } else {
                returnArray.push(container);
            }

            return returnArray;
        });
    };

Любые указатели на то, где мой лог c терпит неудачу, будут оценены!

...