Flow无法识别过滤不可变List

Question

I'm trying to render some React components in two separate lists with headers. For this I use boolean values to determine which component goes into which list.

This is how my code looks like:

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

This works completely fine, but Flow doesn't understand that I filter out the false values after creating the list to only have SomeComponent values in there:

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

It also happens when using standard JavaScript Arrays:

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

What can I do to help Flow understand what's going on?

Answer 1

A possible workaround for this specific case is not using boolean in the List but null:

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

It doesn't work when filtering the immutable instead of the inner Array, but this seems to be connected to this issue .