Flow erkennt keine Filterung einer unveränderlichen Liste

Question

Ich versuche, einige React-Komponenten in zwei separaten Listen mit Headern zu rendern. Dazu verwende ich boolesche Werte, um zu bestimmen, welche Komponente in welche Liste gehört. Diese

ist, wie mein Code wie folgt aussieht:

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

Das funktioniert ganz gut, aber Fluss versteht nicht, dass ich die false Werte herauszufiltern nach der Erstellung der Liste zu SomeComponent Werte haben nur dort:

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

Es kommt auch vor, wenn Standard-JavaScript-Arrays mit:

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

Was kann ich tun, damit Flow weiß, was vor sich geht?

Answer 1

Eine mögliche Abhilfe für diesen speziellen Fall ist boolean in der Liste aber null nicht mit:

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

Es funktioniert nicht, wenn die unveränderliche anstelle des inneren Array Filterung, aber dies scheint verbunden zu sein this issue.