React组件删除所有酒店后无数据提示不显示问题排查

核心问题：空数组的布尔判断逻辑错误 #

你这里的判断条件!!hotels存在逻辑漏洞——在JavaScript里，空数组[]属于真值，!![]会返回true。所以哪怕删除所有酒店后hotels变成空数组，这个条件依然成立，永远不会走到显示提示文本的分支。

额外问题：未覆盖搜索后无匹配结果的场景 #

当前逻辑只判断了原酒店数组是否为空，但如果用户搜索的内容没有匹配项，过滤后的结果为空时，也应该显示提示，现在的逻辑没处理这种情况。

修复代码示例 #

function Card() {
  const [hotels, setHotels] = useState<NewHotelType[]>([]);
  const [search, setSearch] = useState("")

  useEffect(
    () =>
      onSnapshot(hotelsCollection, (snapshot: QuerySnapshot<DocumentData>) => {
        setHotels(
          snapshot.docs.map(doc => {
            return {
              id: doc.id,
              ...doc.data(),
            };
          })
        );
      }),
    []
  );

  // 提前计算过滤后的酒店列表
  const filteredHotels = hotels.filter((item: NewHotelType) => {
    if (!search) {
      return true;
    }
    // 可选：改成模糊匹配提升体验，比如 item.title.toLowerCase().includes(search.toLowerCase())
    return item?.title === search;
  });

  return (
    <div className="card">
      <div className="search">
        <input 
          className="inputsearch" 
          value={search} 
          type="text" 
          placeholder="Search for the hotel" 
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>
      {/* 判断过滤后的结果是否为空 */}
      {filteredHotels.length > 0 ? (
        <div>
          {filteredHotels.map((hotel: NewHotelType) => (
            <Information key={hotel.id} hotel={hotel} />
          ))}
        </div>
      ) : (
        <h2 className="no-hotels">
          {/* 根据不同场景显示对应提示 */}
          {hotels.length === 0 ? "There are no hotels. Please add one" : "No hotels match your search"}
        </h2>
      )}
    </div>
  );
}

export default Card;

关键修改点 #

1. 将判断条件从!!hotels改为filteredHotels.length > 0，直接通过数组长度判断是否有内容，这是判断数组是否为空的标准写法。
2. 提前计算过滤后的结果，既避免重复计算，也能覆盖“原数组有内容但搜索无匹配”的场景。
3. 可选优化：把精确匹配改成大小写不敏感的模糊匹配，提升用户搜索体验。

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