Question

我的代码在这里：https://github.com/justgoof9/IMDB/blob/master/src/App.js 这是我收到的错误：https://i.imgur.com/9HK7egZ.png

在用户输入电影名称并按下搜索按钮后，有人可以告诉我进行API调用的方法吗？

Answer 1

你非常接近 - 你只需要更新你正在呼叫的API网址。具体来说，您没有在您的州设置电影ID，因此您的api电话看起来像这样：http://www.omdbapi.com/?i=&apikey=480344f1。如果您在浏览器中关注该网址，则会看到它返回您正在记录的错误消息。如果您指定了电影ID（例如tt3896198），则会看到您获得正确的API响应http://www.omdbapi.com/?i=tt3896198&apikey=480344f1。

我更新了以下代码段，以便在您的组件状态中设置初始影片ID：

import React, { Component } from "react";
import { Input } from "antd";
import "./App.css";
import { Button } from "antd";

const API_KEY = "480344f1";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movie:"tt3896198",
      movies: []
    };
    this.APIURL = `http://www.omdbapi.com/?i=${
      this.state.movie
    }&apikey=${API_KEY}`;
  }

  changeUserInput = movie => {
    this.setState({ movie });
  };

  onSubmit= (movie) => {
   this.componentWillMount();
  }

  componentWillMount() {
    fetch(this.APIURL)
      .then(resp => resp.json())
      .then(data => {
        console.log(data)
        const updatedMovies = this.state.movies;
        updatedMovies.push(data);
        this.setState({
          movies:updatedMovies,
        })
        console.log(this.state.movies);
      });
  }

  render() {
    return <div>
        <br />
        <br />

        <Input placeholder="Basic usage" placeholder="Search Movies" onChange={e => this.changeUserInput(e.target.value)} />
        <Button
        type="primary"
        shape="circle"
        icon="search"
        onClick={() => this.onSubmit()} />
      </div>;
  }
}

export default App;

我正在尝试使用输入字段中的文本并按搜索按钮进行OMDB API调用

1 个答案: