时间戳

首页 > 解决方案 > React / Axios - “代码”：400，“消息”：“必需参数：部分”

javascript - React / Axios - “代码”：400，“消息”：“必需参数：部分”

问题描述

我正在尝试向我的 youtube api 发出 GET 请求，并且我得到了这个请求，即使我已经包含了 "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>
    );
  }
}

一直试图弄清楚没有任何运气。（我知道我没有保存 fetch 响应，我只是想在执行此操作之前先测试 GET。）

Axios - 0.18

谢谢 ！！！

标签： javascriptreactjsaxios

解决方案

原因：覆盖参数

 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 中 param 部分中的数据，它会起作用。

const KEY = "my api key";

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

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

  }

});

推荐阅读