Javascript 为什么不是'；是否将查询字符串添加到我的自定义挂钩？

我正在建立一个玩具项目来尝试和学习。我试图在Trefle API中搜索数据。用户提供一个字符串，按下一个按钮并触发API调用，我希望它根据搜索返回相关数据

我正在从API获取数据，但它与用户输入无关。未将查询字符串添加到API调用中。有关修复此问题的一些指导将很有帮助。我也希望得到关于我应该把钩子放在哪里以及它们是否在正确的文件中的指导。有时候，我对国家的哪些部分应该去哪里有些困惑。多谢各位

代码示例

自定义挂钩，

useResults

：

import { useState } from "react";
import trefle from "../../api/trefle";

export default () => {
  const [results, setResults] = useState([]);
  const [errorMessage, setErrorMessage] = useState("");

  console.log("results state var coming from hook", results);

  const searchApi = async (term) => {
    try {
      const { data } = await trefle.get(`/plants/search`, {
        params: {
          q: term,
        },
      });
      setResults(data.data);
    } catch (err) {
      setErrorMessage("Something went wrong");
    }
  };

  return [searchApi, errorMessage, results];
};

此自定义挂钩依赖于初始的

axios。请在单独的文件中创建
，顺便说一句：

import axios from "axios";

export default axios.create({
  baseURL: `https://cors-anywhere.herokuapp.com/https://trefle.io/api/v1`,
  headers: {
    Authorization: "my api key which definitely works",
  },
});


这里是我显示API调用结果的地方，
Homepage.js

import React, { useState } from "react";
import SearchBar from "../../components/SearchBar";
import styles from "./Homepage.module.css";
import useResults from "../../utils/hooks/useResults";

const Homepage = () => {
  const [term, setTerm] = useState("");
  const [searchApi, errorMessage, results] = useResults();

  console.log(results, " <---- results state var coming from Homepage");

  const renderResultsList = results.map((tree) => {
    return (
      <div key={tree.common_name}>
        <h3>{tree.common_name}</h3>
        <p>Family name: {tree.family_common_name}</p>
        <p>Scientific name: {tree.scientific_name}</p>
        <img
          src={tree.image_url}
          alt="photographs of trees"
          style={{ maxHeight: "230px", maxWidth: "250px " }}
        />
      </div>
    );
  });

  return (
    <div className={styles.container}>
      <header>
        <h1 className={styles.header}>Plant search</h1>
        <h2 className={styles.subHeader}>Find your favourite plant</h2>
      </header>
      <SearchBar
        value={term}
        onChange={(event) => {
          setTerm(event.target.value);
        }}
        onTermSubmit={(event) => {
          searchApi(term);
          event.preventDefault();
        }}
      />
      {renderResultsList}
      {errorMessage ? <p>{errorMessage}</p> : null}
    </div>
  );
};

export default Homepage;


import React，{useState}来自“React”；
从“../../components/SearchBar”导入搜索栏；
从“/Homepage.module.css”导入样式；
从“../../utils/hooks/useResults”导入用户结果；
const主页=（）=>{
const[term，setTerm]=useState（“”）；
const[searchApi，errorMessage，results]=useResults（）；
console.log（结果，“