反应本机列表空组件在部分列表中不起作用

Question

当我的部分为空时，我试图渲染空组件。这是我的示例代码

<SectionList
    sections={[
        {title: 'sectionOne', data: this.props.Activities.ActivityTypeOne},
        {title: 'sectionTwo', data: this.props.Activities.ActivityTypeTwo},
        {title: 'sectionThree', data: this.props.Activities.ActivityTypeThree}
    ]}
    keyExtractor={ (item, index) => index }
    stickySectionHeadersEnabled={true}
    extraData={this.state}
    ListEmptyComponent={this.renderEmptyScreens}
    />

但是当这3个数组全部为空时，不会触发ListEmptyComponent 谁能告诉我这段代码有什么问题，或者如果我的逻辑不正确，任何人都可以解释一下。 基本上，当所有 3 个数组都为空时，我需要渲染一些视图。

Answer 1

在自己遇到这个问题后，我发现sections 属性必须完全为空列表才能被视为空（也就是sections 本身应该等于[] ）。

解决方案：

使用三元运算符根据您自己的标准选择传递给sections 的内容。如果决定为空，请传入[]，否则传入您的sections 对象。例如，您的代码如下所示：

isSectionsEmpty(sectionsObject){
    //logic for deciding if sections object is empty goes here
}

render(){
    /* ...
       Other render code
       ...
    */
    const sections = [
        {title: 'sectionOne', data: this.props.Activities.ActivityTypeOne},
        {title: 'sectionTwo', data: this.props.Activities.ActivityTypeTwo},
        {title: 'sectionThree', data: this.props.Activities.ActivityTypeThree}
    ]
    return(
        ...
        <SectionList
            sections={this.isSectionsEmpty(sections) ? [] : sections}
            keyExtractor={ (item, index) => index }
            stickySectionHeadersEnabled={true}
            extraData={this.state}
            ListEmptyComponent={this.renderEmptyScreens}
            />
        ...
    )
}

注意：你也可以放弃三元运算符，直接从isSectionsEmpty返回你的section对象或[]，但是这个方法允许你检查section是否在其他地方是“空的”如果需要，在您的代码中。

Answer 2

您可以添加一个节页脚组件，您将在其中根据section.data.length 呈现您的空屏幕

一个小例子见this