如何在按钮单击 Reactjs 上发出 api 获取请求？

Question

到目前为止，我的代码...我正在尝试使用文本框和年份下拉列表，当我单击搜索按钮时，将 2 个参数传递给 fetch api 请求。 我将年份加载到 dropdon 框中，并拥有完整的项目名称列表，稍后我会将其转换为自动完成样式的搜索框。 但现在我只想将 2 个选定的数据发送到 fetch api 请求，其中需要项目的名称，年份是可选的。 我想用获取请求中的数据填充 itemList 数组。

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; 

Answer 1

1. 您错误地使用了async await函数
2. 您可以简化代码并使用单个useEffect调用
3. 您应该向按钮添加一个onClick侦听器

尝试像这样更改您的代码：

const App = () => {
  const [YearList, setYearsData] = useState([]);
  const [NamesList, setNameData] = useState([]);
  const [itemList, setItemList] = useState([]);

  let [year, setYear] = useState(null);
  let handleYearChange = (e) => {
    setYear(e.target.value);
  };

  let [searchQuery, setSearchQuery] = useState('');
  let handleSearchChange = (e) => {
    setSearchQuery(e.target.value);
  };

  let [year, setYear] = useState(null);
  let handleYearChange = (e) => {
    setYear(e.target.value);
  };

  let [searchQuery, setSearchQuery] = useState('');
  let handleSearchChange = (e) => {
    setSearchQuery(e.target.value);
  };

  const fetchYearList = async () => {
    try {
      const response = await fetch('http://localhost:56384/api/YearList');
      setYearsData(await response.json());
    } catch (error) {
      console.log('Failed to fetch from Amazon DB', error);
    }
  };

  const fetchNameList = async () => {
    try {
      const response = await fetch('http://localhost:56384/api/NameList');
      setNameData(await response.json());
    } catch (error) {
      console.log('Failed to fetch from Amazon DB', error);
    }
  };

  const fetchItemData = async () => {
    try {
      const response = await fetch(
        `http://localhost:56384/api/RecallSearch?searchText=${searchQuery}&year=${year}`
      );
      const itemData = await response.json();
      setItemList(itemData);
    } catch (error) {
      console.log('Failed to fetch from Amazon DB', error);
    }
  };

  const handleSearch = () => {
    fetchItemData();
  };

  useEffect(() => {
    fetchYearList();
    fetchNameList();
    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 onClick={handleSearch}>Search</button>
    </div>
  );
};

export default App;