处理使用react查询找不到结果的情况

Question

我正在使用react-query 获取数据并显示它。现在如果获取的数据数组为空，我想显示没有找到记录。如果数据数组包含映射在其上的项目以显示卡片。但我面临一个问题，一开始，数据为空或未定义，我认为这就是为什么它在开始时显示没有找到排序，然后显示数据。我该如何解决这个问题？

import React, { useEffect, useState } from "react";
import Card from "../../Components/Giveaway Card/Card";
import PopUp from "../../Components/GamesDetailsPopUp/PopUp";
import SortByDropDown from '../../Components/SortByDropdown/SortByDropDown';
import { fetchSorteoData } from '../../util/Queries';
import { useQuery } from 'react-query';

export default function Dashboard() {
  const [PopUpModal, setPopUpModal] = useState(false);
  const [selectedSorteo, setSelectedSorteo] = useState(null)
  const [paidChecked, setPaidChecked] = useState(false);
  const [freeChecked, setFreeChecked] = useState(false);
  const { data, isLoading, isError } = useQuery({
    queryKey: ['sorteoData', selectedSorteo, freeChecked, paidChecked],
    queryFn: () => fetchSorteoData(selectedSorteo, freeChecked, paidChecked)
  })

  const handlePaidChange = () => {
    setPaidChecked((prevChecked) => !prevChecked);
    setFreeChecked(false);
  };

  const handleFreeChange = () => {
    setFreeChecked((prevChecked) => !prevChecked);
    setPaidChecked(false);
  };

  return (
    <>
      <div className="text-white flex text-md font-bold tracking-tight justify-end p-5">
        <div className="flex items-center me-4 bg-purple-600 p-2 rounded-lg hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300">
          <input
            type="checkbox"
            checked={paidChecked}
            onChange={handlePaidChange}
            className="w-5 h-5 cursor-pointer text-purple-600 bg-purple-400 border-purple-300 rounded focus:ring-purple-500  focus:ring-2 "
          />
          <label className="ms-2 text-md font-medium">Paid</label>
        </div>
        <div className="flex items-center me-4 bg-purple-600 p-2 rounded-lg hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300">
          <input
            type="checkbox"
            checked={freeChecked}
            onChange={handleFreeChange}
            className="w-5 h-5 cursor-pointer text-purple-600 bg-purple-400 border-purple-300 rounded focus:ring-purple-500  focus:ring-2 "
          />
          <label className="ms-2 text-md font-medium">Free</label>
        </div>
        <SortByDropDown setSelectedSorteo={setSelectedSorteo} />
      </div>
      {
        data && data.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 justify-items-center gap-5">
            {data.map((item, ind) => (
              <div key={ind}>
                <Card item={item} closeModal={() => setPopUpModal(true)} />
                <PopUp
                  closeModal={() => setPopUpModal(false)}
                  PopUpModal={PopUpModal}
                />
              </div>
            ))}
          </div>
        ) : (
          <div className='text-5xl text-white font-bold'>No Sorteos found</div>
        )
      }

    </>
  );
}

Answer 1

添加到评论中的@MatijaSirk 答案。您可以将数据默认为空数组，以避免检查其在组件中是否存在。

// aliases (sorteoData) are handy when dealing with multiple useQuery hooks
 const { data:sorteoData = [], isLoading, isError } = useQuery({
    queryKey: ['sorteoData', selectedSorteo, freeChecked, paidChecked],
    queryFn: () => fetchSorteoData(selectedSorteo, freeChecked, paidChecked)
  })

这里只关心数组是否为空

if (sorteoData.length === 0) { return <div>No results</div> }