问useQuery和useState

EN

import { useQuery, gql } from "@apollo/client";
import { useState } from "react";

const DataTable = () => {
const GET_HORSES = gql`
query{
    horses{
        horseCode
        horseName
        foalingYear
        gender
        trainer{
            trainerCode
        }
    }
}`; 

const [horses, setHorses] = useState([]);
const { data, loading, error} = useQuery(GET_HORSES, {
    OnCompleted: (data) => setHorses(data.horses)
});

if (loading) { return "Loading..." };
if (error) { return "Error loading data!"};
if (!data) { return "No data available!"};

const handleSubmit = () => {
    var ddSearch = document.getElementById("ddSearch");
    var ddSearchVal = ddSearch.value;

    if(ddSearchVal === "HorseCode") {

    }
    
    console.log(horses);
}

return (
    <div className="flex-column">
        <div className="Data-search">
            <strong>Searching</strong>
            <br/>
            <select id="ddSearch" >
                <option value="HorseCode">Horse Code</option>
                <option value="TrainerCode">Trainer Code</option>
                <option value="HorseName">Horse Name</option>
            </select>
            <br/>
            <input type="txtSearch" id="search" style={{width: 94}}/>
            <br/><br/>
            <strong>Foaling Year</strong>
            <br />
            From:<br/>
            <input type="number" id="foalingYearMin" min="2000" max="2010" style={{width: 94}} /><br/>
            To:<br/>
            <input type="number" id="foalingYearMax" min="2000" max="2010" style={{width: 94}} />
            <br/><br/>
            <strong>Gender:</strong><br/>
            <select id="ddGender" style={{width: 94}}>
                <option value="g">g</option>
                <option value="f">f</option>
                <option value="c">c</option>
            </select>
            <br/><br/>
            <button type="button" style={{width: 94}} onClick={() => handleSubmit()}>Search</button>
            <br/>
            <button type="button" style={{width: 94}}>Reset</button>
        </div>
        <table className="Data-table">
            <thead>
                <tr>
                    <th>Horse Code</th>
                    <th>Horse Name</th>
                    <th>Foaling Year</th>
                    <th>Gender</th>
                    <th>Trainer Code</th>
                </tr>
            </thead>
            <tbody>
                {horses.map((horse) => (
                    <tr key={horse.horseCode}>
                        <td>{horse.horseCode}</td>
                        <td>{horse.horseName}</td>
                        <td>{horse.foalingYear}</td>
                        <td>{horse.gender}</td>
                        <td>{horse.trainer.trainerCode}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    </div>  
);
}

export default DataTable;