Получение пустого массива в React при извлечении данных из API - PullRequest
Новая
       43

Получение пустого массива в React при извлечении данных из API

0 голосов
/ 05 марта 2020

Я извлекаю данные из API moviedb и работаю над поиском фильмов. Я взял некоторые ссылки из учебника alligator.io. Ниже приведен мой код компонента Header, из которого я получаю данные.

Header. js

import React, { Component } from "react"
import { Navbar, Button, Form, FormControl } from "react-bootstrap"
import { NavLink } from "react-router-dom"
import axios from "axios"
const apiKey = process.env.REACT_APP_MOVIE_DB_API_KEY


class Header extends Component {
  state = {
    isSearching: false,
    value: "",
    movies: []
  }

  searchMovies = async val => {
    console.log("val", val)
    this.setState({ isSearching: true })
    const res = await axios(
      `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&language=en-US&query=${val}page=1&include_adult=true`
    )
    const movies = await res.data.results
    console.log(movies)
    this.setState({ movies: movies, isSearching: false })
  }

  handleChange = e => {
    const { name, value } = e.target
    this.searchMovies(value)
    this.setState({
      [name]: value
    })
  }

  handleSearch = () => {
    console.log(this.state.movies)
  }

  render() {
    return (
      <div>
        <Navbar
          bg="dark"
          expand="lg"
          style={{ justifyContent: "space-around" }}
        >
          <NavLink to="/">
            <Navbar.Brand>Movie Catalogue</Navbar.Brand>
          </NavLink>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Form inline>
              <FormControl
                type="text"
                placeholder="Search"
                className="mr-sm-2"
                onChange={this.handleChange}
                name="value"
                value={this.state.value}
              />
              <Button variant="dark" onClick={this.handleSearch}>Search</Button>
            </Form>
          </Navbar.Collapse>

          <NavLink to="/popular">Popular</NavLink>
          <NavLink to="/now-playing">Now Playing</NavLink>
          <NavLink to="/top-rated">Top Rated</NavLink>
          <NavLink to="/upcoming">Upcoming</NavLink>
        </Navbar>
      </div>
    )
  }
}

export default Header

Я получаю пустой массив в movies. Когда я поддерживаю лог this.state.movies внутри handleSearch, он все равно возвращает пустой массив. Я не знаю, почему это происходит. URL и все правильно, но я получаю пустой массив.

Ответы [ 2 ]

1 голос
/ 05 марта 2020

Я думаю, вы должны использовать метод get () в вашей функции searchMovies. 

const response = await axios.get('/user?ID=12345');
console.log(response);
0 голосов
/ 05 марта 2020

Вы не вызываете соответствующий метод топора ios. Используйте метод get ()

Попробуйте: 

 searchMovies = async val => {
    this.setState({ isSearching: true })
    const res = await axios.get(
      `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&language=en-US&query=${val}page=1&include_adult=true`;
    )
    const movies = await res.data.results;
    this.setState({ movies: movies, isSearching: false })
  }
...