Le flux ne reconnaît pas le filtrage d'une liste immutable

Question

J'essaie de rendre certains composants React dans deux listes séparées avec des en-têtes. Pour cela, j'utilise des valeurs booléennes pour déterminer quel composant va dans quelle liste.

Voici comment mon code ressemble à:

const children1: List<SomeComponent> = List([ 
    bool1 && <SomeComponent key="0" />, 
    bool2 && <SomeComponent key="1" />, 
]).filter(value => value !== false); 

const children2: List<SomeComponent> = List([ 
    !bool1 && <SomeComponent key="0" />, 
    !bool2 && <SomeComponent key="1" />, 
]).filter(value => value !== false); 

Cela fonctionne tout à fait bien, mais le débit ne comprend pas que je filtre les valeurs false après la création de la liste ont seulement SomeComponent valeurs là:

   bool1 && <SomeComponent key="0" />, 
      ^^^^^ boolean. This type is incompatible with 
     const children1: List<SomeComponent> = List([ 
          ^^^^^^^^^^^^^^^^^^^ prototype 

Il arrive aussi lors de l'utilisation des tableaux JavaScript standard:

const children2: Array<SomeComponent> = [ 
    !bool1 && <SomeComponent key="0" />, 
    !bool2 && <SomeComponent key="1" />, 
].filter(value => value !== false); 

Que puis-je faire pour aider Flow à comprendre ce qui se passe?

Answer 1

Une solution possible pour ce cas spécifique n'utilise pas booléen dans la liste mais nulle:

const children2: List<SomeComponent> = List([ 
    !bool1 ? <SomeComponent key="0" /> : null, 
    !bool2 ? <SomeComponent key="0" /> : null, 
].filter(Boolean)); 

Il ne fonctionne pas lors du filtrage immuable au lieu de la matrice intérieure, mais cela semble être connecté à this issue.