錯誤：請求失敗，狀態代碼為 400 - React - API Key

Question

這是我的代碼：

import "./styles.css";
import "mvp.css";
import { useState, useEffect } from "react";
import axios from "axios";

function Books() {
  const [book, setBook] = useState("");
  const [result, setResult] = useState([]);
  const [apiKey, setApiKey] = useState(
    ""
  );
  function handleChange(event) {
    const book = event.target.value;

    setBook(book);
  }

  function handleSubmit(event) {
    event.preventDefault();

    axios
      .get(
        "https://www.googleapis.com/books/v1/volumes?q=" +
          book +
          "&key=" +
          apiKey +
          "&maxResults=100"
      )
      .then((data) => {
        console.log(data);
      });
  }

  return (
    <div className="App">
      <h1>Search For A Book</h1>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <input
            type="text"
            onChange={handleChange}
            className="input"
            placeholder="Search..."
          />
          <button type="submit" className="btn">
            Go!
          </button>
        </div>
      </form>
    </div>
  );
}

export default function App() {
  return <Books />;
}

有誰能弄清楚為什么我無法讓它工作？ 我不斷收到請求失敗錯誤，我不確定出了什么問題。 我已經手動將我的 url 輸入到我的瀏覽器中，如下所示：

https://www.googleapis.com/books/v1/volumes?q=javascript&key=APIKEY

但是，當我通過我的代碼執行此操作時，它不起作用。

提前致謝。

Answer 1

可以看到，你的axios中的url是： https://www.googleapis.com/books/v1/volumes?q=javascript&key=apiKey&maxResults=100

所以為什么返回 http 代碼 400，你應該刪除&maxResults=100

Answer 2

根據建議，maxResults 應小於 <= 40。 更新代碼中的最大結果。 之后它會起作用

Answer 3

錯誤信息是什么？ 如果“API 密鑰無效。請傳遞有效的 API 密鑰。” u api 密鑰錯誤。 此頁面將幫助您https://cloud.google.com/apis/design/errors