React Native：如何销毁.map生成组件并按searchValue控制显示？

核心问题分析 #

1. 变量名不一致：你代码里混用了searchValue和searchedValue，这会直接导致条件判断失效，是最可能的诱因。
2. 加载状态逻辑错误：原来的加载代码里，在isLoading时同时渲染Spinner和旧卡片列表，这会导致加载完成后，旧卡片因变量未重置或条件覆盖不全而残留。

修正后的代码实现 #

先统一变量名（假设统一用searchedValue），再拆分加载状态与结果展示的逻辑：

1. 加载状态渲染（仅显示Spinner，不渲染旧卡片）

{searchQuery.isLoading && <Spinner size="large" color="#ffffff" />}

2. 加载完成后的结果控制

{!searchQuery.isLoading && (
  <>
    {/* 仅当有搜索值时展示结果区域 */}
    {searchedValue !== null && (
      searchedValue.length === 0 ? (
        <Text>No results found</Text>
      ) : (
        <View flexDirection="row" flexWrap="wrap" justifyContent="center">
          {searchedValue.map((item) => (
            <BookCard book={item} key={item.volumeInfo.title} />
          ))}
        </View>
      )
    )}
    {/* 无搜索值时，不渲染任何结果相关内容 */}
  </>
)}

额外注意事项 #

• 每次触发新搜索前，务必将searchedValue重置为null或空数组，避免旧数据残留。
• TanStack Query的isLoading仅在首次加载或主动重新获取数据时为true，若涉及后台静默刷新，需用isFetching判断加载状态。

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