React.js Mise à jour de l'état où plusieurs points de terminaison d'API sont impliqués

J'essaie actuellement de faire fonctionner un projet pour tester certaines choses et je suis coincé à un point où j'essaye de mettre à jour l'état correctement.

J'ai un point de terminaison accessible via axios. get ("/ docker / containers") qui renverra un tableau pour tous les ID des conteneurs qui sont actuellement en cours d'exécution sur mon système, ceci se fait comme ceci:

render() {
  const containers: any = [];
  const curStateOfContainers: IndividualContainer[] = [...this.state.containers];
  if (curStateOfContainers.length > 0) {
    curStateOfContainers.map(container => {
      const container_id = container.id.slice(0, 12);
      containers.push(
        <Container
                   key          = {container_id}
                   container_id = {container.id}
                   name         = {container.name}
                   clickHandler = {() => this.setWatcher(container.id)}
        />
      );
    });
  }
  return containers;
}

À ce stade, mon état ressemble à ceci:

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;
  });
};

L'interface utilisateur affiche alors simplement une liste d'identifiants.

Je peux alors cliquer sur un ID sur mon interface utilisateur et il définira un observateur:

TS2322: Type 'void' is not assignable to type 'IndividualContainer[]'.

Le but de l'observateur est que lors du prochain cycle de mise à jour des informations plus détaillées sur un conteneur particulier soient récupérées.

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

En cliquant sur le conteneur dans l'interface utilisateur où un watcher est déjà défini, alors le watcher est supprimé et le des informations plus détaillées ne sont alors plus récupérées

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

Là où je suis bloqué, c'est comment obtenir des informations plus détaillées rmation. Ma méthode updateContainers comporte 3 étapes:

1. Lisez la réponse de l'API et détruisez l'état en variables séparées, comparez la var d'état avec la var de réponse et supprimez tous les conteneurs qui sont tombés en panne (aucun setState n'est fait ici) .

2. Ajoutez tous les nouveaux conteneurs de la réponse à l'état qui sont apparus depuis (encore une fois pas de setState ).

... Tout va bien jusqu'à présent ...

3. Parcourez le tableau filtré de conteneurs des étapes 1 et 2 et recherchez tous les conteneurs dans lesquels un observateur est défini. Où il est défini, effectuez un appel API pour récupérer les informations plus détaillées. Définissez enfin l'état.

À l'étape 3, j'utilise un forEach sur le tableau filtré, puis je fais un axios.get ("/ docker / containers / id1") où un watcher a été défini, sinon gardez simplement les détails du conteneur que j'ai déjà mais c'est là que je suis bloqué, Typescript me donne également l'erreur:

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

J'ai actuellement:

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

Tout pointeur vers où ma logique échoue serait apprécié!

Modifier: p >

Méthode de rendu:

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