React Native刷新数据时如何控制列表与空状态的显示逻辑？

你需要调整组件的条件渲染逻辑，优先判断refreshing状态，再根据documents数组的内容决定渲染内容，修改后的代码如下：

const DocumentsListWidget = ({ refreshing }) => {

  const {
    documents: { documents },
    policy: {
      policyInfo: { PolicyId },
    },
  } = useSelector((state) => state);
  
  // 刷新状态下不渲染任何内容
  if (refreshing) {
    return <SecureAreaWrapper />;
  }

  return (
    <SecureAreaWrapper
      ...
    >
      {documents.length > 0 ? (
        <FlatList
          scrollEnabled={false}
          data={documents}
          ListHeaderComponent={Header}
          renderItem={({ item }) => (
            <Item
              ...
            />
          )}
        />
      ) : (
        <Text style={documentsListings.noDocuments}>
          No documents available
        </Text>
      )}
    </SecureAreaWrapper>
  );
};

逻辑说明 #

• 当refreshing为true时，直接返回仅包含SecureAreaWrapper的空视图，不渲染任何内容
• 当refreshing为false时：
  • 如果documents数组有内容，渲染展示文档列表的FlatList
  • 如果documents数组为空，渲染“No documents available”提示文本

内容的提问来源于stack exchange，提问作者Bomber