Ошибка машинописного текста «Не удается прочитать свойство« данные »из неопределенного» в приложении api фильма: - PullRequest
Новая
       16

Ошибка машинописного текста «Не удается прочитать свойство« данные »из неопределенного» в приложении api фильма:

0 голосов
/ 05 июня 2018

Невозможно прочитать свойство 'data' из неопределенного

У меня проблема с моим приложением Информация о фильме типа машинописного текста.Я пытаюсь отобразить данные, которые я получаю от API, но я застрял на «Невозможно прочитать свойство« данные »из неопределенного» * ​​1004 *, все компоненты собраны, но это полный путь-block.

Я видел несколько других примеров, когда у людей были похожие проблемы, но я не могу найти решения своей проблемы.Я не уверен, где начать искать тоже.Чтобы добавить к этому, у меня очень мало опыта написания веб-приложений, ну, если честно, любых приложений.Любая помощь будет высоко ценится!И если у вас есть хорошие ресурсы, где вы можете узнать о причинах или препятствиях такого рода проблем, я бы с удовольствием принял в них участие!

Вот что я получил от chrome devtools: 

- Uncaught TypeError: Cannot read property 'data' of undefined
- The above error occurred in the <MoviesList> component:
- in MoviesList (created by App)
- in div (created by App)
- in div (created by App)
- in App"

App.tsx 

import axios from "axios";
import * as React from "react";
import "./App.css";
import MoviesList from "./Components/MoviesList";
import SearchForm from "./Components/SearchForm";

export default class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = { 
      loading: true,
      movies: []
    };
  }

  public componentDidMount() {
    this.performSearch();
  }

  public performSearch = (query = "Cats") => {
    axios
      .get(`http://www.omdbapi.com/?apikey=(API-key)&s=home`)
      .then(response => {
        this.setState({    //<---- Here's where my code breaks in "App"
          loading: false,
          movies: response.data.data
        });
      })
      .catch(error => {
        // tslint:disable-next-line:no-console
        console.log("Error fetching and parsing data", error);
      });
  };

  public render() {
    return (
      <div>
        <div className="main-header">
          <div className="inner">
            <h1 className="main-title">Playpilot Assignment</h1>
            <SearchForm onSearch={this.performSearch} />
          </div>
        </div>
        <div className="main-content">
          {this.state.loading ? (
            <p>Loading...</p>
          ) : (
            <MoviesList data={this.state.movies} />
          )}
        </div>
      </div>
    );
  }
}

MoviesList.tsx 

import * as React from "react";
import Movie from "./Movie";

const MoviesList = (props: any) => {
  const results = props.data;
  let movies: any;
  if (results.data) { //<-- Here's where my code breaks in "MoviesList"
    movies = results.map((movie: any) => (
      <Movie url={props.url} key={movie.id} />
   ));
  } else {
    movies = <h1>404: No movies found.</h1>;
  }

  return <ul className="movie-list">{movies}</ul>;
};

export default MoviesList;

Еще раз спасибо!

1 Ответ

0 голосов
/ 05 июня 2018

Я думаю, что это является причиной вашей проблемы: 

movies: response.data.data

Попробуйте изменить это значение на: 

movies: response.data

Поскольку вы просили дать более общий совет, я бы началузнав, как использовать отладчик DevTools, поскольку он позволит вам стать более независимым при диагностике таких проблем, как эта.Узнайте, как устанавливать точки останова и как пройти по коду, чтобы проверить, что происходит.Это сэкономит вам много часов скорби.Кроме того, не бойтесь начинать разбрасывать операторы console.log по всему коду во время обучения - просто не забудьте удалить их впоследствии.

В конце концов, обучение написанию автоматических тестов действительно поможет вам быть уверенным в написанном коде, но делать это по одному шагу за раз.

...