javascript - react /Axios- "code": 400, "message": "Required parameter: part"

Question

我正在尝试向我的 youtube api 发出 GET 请求，我得到了它，即使我包含了“部分”:

"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

  }

});