React / Axios - "код": 400, "сообщение": "Обязательный параметр: часть"

Question

Я пытаюсь сделать GET-запрос к моему API YouTube, и я получаю его обратно, хотя я включил "part":

"code": 400, "message": "Required parameter: part"

и из вкладки сети:

{
 "error": {
  "errors": [
   {
    "domain": "global",
    "reason": "required",
    "message": "Required parameter: part",
    "locationType": "parameter",
    "location": "part"
   }
  ],
  "code": 400,
  "message": "Required parameter: part"
 }
}

Может кто-нибудь помочь мне выяснить, что я здесь не так сделал?

Вот мои файлы:

youtube.js

const KEY = "my api key";

export default axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3",
  params: { 
      part: "snippet",
      maxResults: 5,
      key: KEY
  }
});

мое приложение:

class App extends React.Component {
  state = {};

  onSearchSubmit = term => {
    const x = youtube.get("/search", {
      params: {
        q: term
      }
    });
    console.log(x);
  };

  render() {
    return (
      <div className='ui container'>
        <SearchBar onFormSubmit={this.onSearchSubmit} />
      </div>
    );
  }
}

и, наконец, мой SearchBar.js:

class SearchBar extends React.Component {
  state = { term: "" };

  onInputChange = event => {
    this.setState({ term: event.target.value });
  };

  onformSubmit = event => {
    event.preventDefault();
    this.props.onFormSubmit(this.state.term);
  };

  render() {
    return (
      <div className='ui segment search-bar'>
        <form onSubmit={this.onformSubmit} action='' className='ui form'>
          <div className='field'>
            <label htmlFor=''>Video Search</label>
            <input
              value={this.state.term}
              type='text'
              onChange={this.onInputChange}
            />
          </div>
        </form>
      </div>
    );
  }
}

Пытаюсь разобраться без удачи. (Я знаю, что не сохраняю ответ извлечения, я просто хотел сначала проверить GET, прежде чем сделать это.)

Axios - 0,18

Спасибо !!!

Answer 1

Причина: перезапись параметров

 const KEY = "my api key";
    export const baseParams = {
      part: "snippet",
      maxResults: 5,
      key: KEY
    };

    export default axios.create({
      baseURL: "https://www.googleapis.com/youtube/v3"
    })



    import React from 'react';
    import SearchBar from './SearchBar';
    import youtube, { baseParams } from '../components/apis/youtube';

    class App extends React.Component {
      state = {};

      onSearchSubmit = term => {
        const x = youtube.get("/search", {
          params: {
          ...baseParams,
            q: term
          }
        });
        console.log(x);
      };

      render() {
        return (
          <div className='ui container'>
            <SearchBar onFormSubmit={this.onSearchSubmit} />
          </div>
        );

Не обращайте внимания на то, что вы изначально ошибочно добавили данные.

Удалите данные из раздела параметров в Youtube.js. Это будет работать.

const KEY = "my api key";

export default axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3",
  params: {

      part: "snippet",
      maxResults: 5,
      key: KEY

  }

});