Question

我正在尝试使用标头在两个单独的列表中呈现一些React组件。为此，我使用布尔值来确定哪个组件进入哪个列表。

这就是我的代码的样子：

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

这完全正常，但Flow不明白我在创建列表后过滤掉了false值，只有SomeComponent值：

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

使用标准JavaScript数组时也会发生这种情况：

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

我可以做些什么来帮助Flow了解正在发生的事情？

Answer 1

此特定情况的可能解决方法是不在List中使用布尔值，而是使用null：

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

在过滤不可变而不是内部数组时，它不起作用，但这似乎与this issue相关联。

Flow无法识别过滤不可变List

1 个答案: