Mi código hasta ahora ... Estoy tratando de tener un cuadro de texto y una lista desplegable del año que cuando hago clic en el botón de búsqueda pasa 2 parámetros en una solicitud de búsqueda de API. He cargado los años en el cuadro desplegable y tengo una lista completa de nombres de elementos que luego convertiré en un cuadro de búsqueda de estilo de autocompletar. pero por ahora solo quiero enviar los 2 datos seleccionados a una solicitud de búsqueda de API donde se requiere el nombre del elemento y el año es opcional. quiero llenar la matriz itemList con los datos de la solicitud de recuperación.

 const App = () => { const [YearList, setYearsData] = useState([]); const [NamesList, setNameData] = useState([]); //Get YearsList data to populate dropbox useEffect(() => { const fetchItemData = async () => { try { fetch("http://localhost:56384/api/YearList") .then(response => response.json()) .then(itemData => setYearsData(itemData)); } catch(error) { console.log("Failed to fetch from Amazon DB", error); } }; fetchItemData() }, []); //Get NamesList Data for autocomplete textbox useEffect(() => { const fetchItemData = async () => { try { fetch("http://localhost:56384/api/NameList") .then(response => response.json()) .then(itemData => setNameData(itemData)); } catch(error) { console.log("Failed to fetch from Amazon DB", error); } }; fetchItemData() }, []); let [year, setYear] = useState(null) let handleYearChange = (e) => { setYear(e.target.value) } let [searchQuery, setSearchQuery] = useState("") let handleSearchChange = (e) => { setSearchQuery(e.target.value) } //Fetch reqiest that is not working const [itemList, setItemList] = useState([]); useEffect(() => { const fetchItemData = async () => { try { fetch(`http://localhost:56384/api/RecallSearch?searchText=${searchQuery}&year=${year}`) .then(response => response.json()) .then(itemData => console.log(itemData)); } catch(error) { console.log("Failed to fetch from Amazon DB", error); } }; fetchItemData() }, []); return ( <div className="App"> <TitleCard /> <input type="text" value={searchQuery} onChange={handleSearchChange} placeholder='Search Amazon Items'/> <select onChange={handleYearChange}> <option value="-- Select year --"> -- Select a Year -- </option> {YearList.map((year) => <option key={year} value={year}>{year}</option>)} </select> //Button that isnt working <button>Search</button> </div> ); } export default App;