React.js宠物搜索功能如何实现无匹配结果时显示“未找到相关项”提示

问题原因 #

你当前的代码存在3个核心问题导致无结果提示不生效：

1. Array.filter() 方法永远返回数组，哪怕没有匹配结果也会返回空数组 []，而空数组在JS中属于真值，所以 if(searchItem) 判断永远成立，永远不会走else分支。
2. else分支中你错误调用了state变量 searchResults，state更新应该调用对应的setter方法 setSearchresults，这里的写法不仅不会更新状态，还会抛出执行错误。
3. 渲染逻辑没有区分「首次未搜索」和「搜索后无结果」两种场景，两种状态下searchResults都是空数组，没法触发不同的展示内容。

解决步骤 #

1. 新增搜索状态标记

在Search组件中新增hasSearched状态，用来区分是否已经提交过搜索：

const [searchResults, setSearchresults] = React.useState([])
// 新增状态，默认未搜索
const [hasSearched, setHasSearched] = useState(false)

2. 修正提交逻辑

删掉原来错误的if判断，直接更新搜索结果，同时标记已经提交搜索：

onSubmit: values => {
  const searchItem = searchGuests.guestsResults.filter(item => {
    return (
      item.location
        .toLowerCase()
        .includes(
          values.location.toLowerCase()
        ) &&
      item.age
        .toLowerCase()
        .includes(
          values.age.toLowerCase()
        ) &&
      item.breed
        .toLowerCase()
        .includes(
          values.breed.toLowerCase()
        ) &&
      item.gender
        .toLowerCase()
        .includes(
          values.gender.toLowerCase()
        )
    )
  })
  // 直接更新搜索结果，同时标记已提交搜索
  setSearchresults(searchItem)
  setHasSearched(true)
},

3. 修正渲染逻辑

根据hasSearched状态区分不同场景的展示内容：

<Row className="mt-5 items">
  {!hasSearched ? (
    // 未提交搜索时显示引导页
    <LoadingPage />
  ) : searchResults.length > 0 ? (
    // 有搜索结果时渲染列表
    searchResults.map(result => {
      return (
        <SearchResults
          key={result.id}
          img={result.img}
          location={result.location}
          age={result.age}
          breed={result.breed}
          gender={result.gender}
          name={result.name}
        />
      )
    })
  ) : (
    // 搜索后无结果时显示提示
    <Col sm={12} className="text-center py-5">
      <h4>No Items were found</h4>
    </Col>
  )}
</Row>

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