React中如何对filter方法返回结果做条件渲染以实现搜索匹配功能

• 判断条件错误：filteredAssets是你在render内声明的独立变量，并非cards数组的原生属性，cards.filteredAssets === true的判断结果永远为假，所以代码始终走else分支渲染全部资产卡片，不会触发过滤逻辑。
• 过滤分支的渲染逻辑错误：你在过滤成立的分支里依然遍历原cards数组，还将整个过滤后的数组filteredAssets传给单个CardPublic组件的card属性，即使条件触发也会出现渲染异常。

你写的过滤逻辑本身已经满足需求：searchField为空时，所有资产的assetName都会包含空字符串，filteredAssets就是完整的原资产数组，完全不需要额外写三元判断，直接遍历filteredAssets即可。

把原来的三元代码块替换为以下代码即可：

{filteredAssets.map(card => (
  <CardPublic 
    addToFavorites={this.addToFavorites} 
    card={card} 
    user={user} 
    key={card._id} 
  />
))}

如果需要保留三元写法做额外逻辑扩展，正确的写法参考：

{searchField.trim() ? 
  filteredAssets.map(card => (
    <CardPublic 
      addToFavorites={this.addToFavorites} 
      card={card} 
      user={user} 
      key={card._id} 
    />
  )) : 
  cards.map(card => (
    <CardPublic 
      addToFavorites={this.addToFavorites} 
      card={card} 
      user={user} 
      key={card._id} 
    />
  ))
}

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