根據用戶輸入動態改變axiosbaseURL-有解無憂

我想根據用戶輸入更改 Axios 基本 URL。我正在使用谷歌圖書 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} />
    </>
  );
}

謝謝！

根據用戶輸入動態改變axios baseURL

uj5u.com熱心網友回復：

您可以維護一個可以保存輸入文本的狀態變數。url可以使用 es6 模板字串動態構建。

根據用戶輸入動態改變axios baseURL

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因為我們真的不需要狀態變數來觸發每次用戶輸入的重新渲染。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/485364.html

標籤：反应 axios

上一篇：從React中的表行獲取物件

下一篇：React腳本和terser-webpack-plugin的問題