根据用户输入动态更改 Axios baseURL

Question

我想根据用户输入更改 Axios 基础 URL。我正在使用 google 本书 API 并希望根据输入框中输入的任何内容更改搜索查询 (q=)。

我认为这可以通过将 baseURL 放在一个函数中并在提交按钮的 onClick 上调用它来完成。

const baseURL = `https://www.googleapis.com/books/v1/volumes?q={input}`;
export default function App() {
  
  const [post, setPost] = React.useState(null);
 
  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);

  if (!post) return null;
  return (
    <>
    <input placeholder="bookname"></input> 
      <button>Submit</button>
      <h1>{post.items[0].volumeInfo.title}</h1>
      <h2>{post.items[0].volumeInfo.publisher}</h2>
      <img src={post.items[0].volumeInfo.imageLinks.thumbnail} />
    </>
  );
}

谢谢！

Answer 1

您可以维护一个可以保存输入文本的状态变量。 url 可以使用 es6 模板字符串动态构造。

export default function App() {
  const [post, setPost] = React.useState(null);
  const [query, setQuery] = React.useState("themartian");

  async function getBooks() {
    const baseURL = `https://www.googleapis.com/books/v1/volumes?q=${query}`;
    const response = await axios.get(baseURL);
    setPost(response.data);
  }

  function onClick() {
    getBooks();
  }

  React.useEffect(() => {
    getBooks();
  }, []);
...

还有一种使用 useRef 的替代方法，因为我们真的不需要状态变量来在每次用户输入时触发 re-render。

export default function App() {
  const [post, setPost] = React.useState(null);
  const inputRef = React.useRef(null);

  async function getBooks() {
    let query = "themartian";
    if (inputRef.current) {
      query = inputRef.current.value;
    }
    const url = `https://www.googleapis.com/books/v1/volumes?q=${query}`;
    const response = await axios.get(url);
    setPost(response.data);
  }

  function onClick() {
    getBooks();
  }

  React.useEffect(() => {
    getBooks();
  }, []);
...

根据用户输入动态更改 Axios baseURL

Change Axios baseURL dynamically according to user Input

reactjs

axios