Реагируйте на setState, работающий и получающий неопределенность - PullRequest
Новая
       13

Реагируйте на setState, работающий и получающий неопределенность

0 голосов
/ 12 мая 2019

Новое в React, создание приложения для проекта Codecademy, которое вызывает Spotify Web API.

Вызов API работает: я получаю токен доступа и таймер истечения, а затем возвращаю результаты песни в массиве. Затем я использую setState в App.js, чтобы searchResults = массив, возвращаемый Spotify. Затем я передаю searchResults от state до props дочерним компонентам.

App.js (состояние) -> Search-container.js -> Search-view.js -> SearchResults-container.js -> SearchResults-view.js -> Track-container.js

Я вижу, что state успешно передается props, потому что я записываю this.props.searchResults в консоль в Track-container.js и вижу массив результатов.

Однако на следующей строке в консоли он становится undefined.

Снимок экрана консоли: https://i.imgur.com/XkMEb4o.png

Консоль 

Did update
Track-container.js:19 [{…}]
Track-container.js:18 Did update
Track-container.js:19 undefined
Track-container.js:18 Did update
Track-container.js:19 [{…}]
Track-container.js:18 Did update
Track-container.js:19 undefined
Track-container.js:18 Did update
Track-container.js:19 [{…}]
Track-container.js:18 Did update
Track-container.js:19 undefined
Track-container.js:18 Did update
Track-container.js:19 [{…}]
Track-container.js:18 Did update
Track-container.js:19 undefined
Spotify.js:44 BQBLcVOKRR7i2MjOoNu9lp4He2oOJ1FN8e90Cbben-naezHF3DP7ZWgTlCcDvIBXsa5KXQndALtkoxBtY3RYR8BhTfVnZ5QdlE-vMVQ_mgnlHqT4M_6TpLYVEisn9kw_9slvh_nPhyRIGvg7gA
Spotify.js:45 3600
Track-container.js:18 Did update
Track-container.js:19 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Track-container.js:18 Did update
Track-container.js:19 undefined

Метод componentDidUpdate () в Track-container.js регистрируется на консоли каждый раз, когда я печатаю в поле поиска (в котором есть обработчик onChange). Не уверен, что это ожидаемое поведение в React?

Мой код:

Spotify.js: 

export class Spotify extends React.Component {
  constructor(props) {
    super(props);
  }

  getAccessToken() {
    if (userAccessToken) { // If access token already defined
      return userAccessToken;

    } else if (window.location.href.match(userAccessTokenRegex) != null) { // If access token is not yet defined but there is an access token in the URL

        // Set access token from URL hash fragment
        userAccessToken = window.location.href.match(userAccessTokenRegex)[1];
        // Set expiry timer from URL hash fragment
        expiresIn = window.location.href.match(expiresInRegex)[1];
        // Wipe the access token after expiry timer runs out
        window.setTimeout(() => userAccessToken = '', expiresIn * 1000);
        // Clear the parameters from the URL
        window.history.pushState('Access Token', null, '/');

    } else {
        window.location = authUrl; // Redirect to Spotify auth
    }
  }

  async search(term) {
    if (userAccessToken === undefined) {
      this.getAccessToken();
      console.log(userAccessToken);
      console.log(expiresIn);
    }

    try {
      const response = await fetch('https://api.spotify.com/v1/search?type=track&q=' + term, {
        method: 'GET',
        headers: {'Authorization': `Bearer ${userAccessToken}`}
      })
      if (response.ok) {
        let jsonResponse = await response.json();
        let tracks = jsonResponse.tracks.items.map(track => ({
                id: track.id,
                name: track.name,
                artist: track.artists[0].name,
                album: track.album.name,
                uri: track.uri
            }));
        return tracks;
      }
    }
    catch(error) {
      console.log(error);
    }
  }

};

App.js: 

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      'term': '',
      "searchResults": [
        {}
      ]
    }

    // Create Spotify
    this.Spotify = new Spotify();

    // Bind this
    this.handleChange = this.handleChange.bind(this);
    this.search = this.search.bind(this);
    this.onSearch = this.onSearch.bind(this);
  }

  // onChange handler for child input
  handleChange(e) {
    const term = e.target.value; // Take value from child component input field
    this.setState({ // Update state with value
      term: term
    });
  }

  // onSubmit handler for SearchBar input
  onSearch(e) {
    e.preventDefault();
    this.search(this.state.term);
  }

  // Search method
  async search(term) {
    const results = await this.Spotify.search(term);
    this.setState({
      searchResults: results
    });
  }

  render() {
    return (
      <div className="columns is-marginless">
        <main className="column is-two-thirds has-padding-40">
          <header>
            <h1 className="title">Jammming</h1>
            <h2 className="subtitle">Create Spotify playlists.</h2>
          </header>
          <Search searchResults={this.state.searchResults} onChange={this.handleChange} onSearch={this.onSearch} value={this.state.term} />
        </main>

        <aside className="column is-one-third is-paddingless">
          <Playlist />
        </aside>
      </div>
    );
  }
}

[... 4 компонента в середине, каждое переходящее состояние вниз через подпорки ...]

Трек-container.js: 

export class Track extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidUpdate() {
        console.log('Did update');
        console.log(this.props.searchResults);
    }

    render() {
        return (
            <div className="TrackList">

            </div>
        );
    }
}

В конечном итоге в Track-container.js я хочу отобразить массив для вывода компонента <TrackView /> для каждого элемента в массиве, но пока не могу этого сделать, потому что массив undefined.

Edit:

Добавление кода для компонентов поиска на случай возникновения ошибки.

Поиск-container.js: 

import React from 'react';
// Import child components
import { SearchView } from './Search-view';

export class Search extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <SearchView searchResults={this.props.searchResults} onChange={this.props.onChange} onSearch={this.props.onSearch} value={this.props.value} />
    );
  }
}

Поиск-view.js: 

import React from 'react';
// Import child components
import { SearchBar } from './SearchBar';
import { SearchResults } from './SearchResults';

export const SearchView = (props) => {
  return (
    <section className="Search">
      <SearchBar onChange={props.onChange} onSearch={props.onSearch} value={props.value} />
      <SearchResults searchResults={props.searchResults} />
    </section>
  );
}

SearchBar-container.js: 

import React from 'react';
import { SearchBarView } from './SearchBar-view';
import Spotify from '../../../../utils/Spotify';

export class SearchBar extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
      <SearchBarView onChange={this.props.onChange} onSearch={this.props.onSearch} value={this.props.value} />
      <h2>{this.props.value}</h2>
      </div>
    );
  }
}

SearchBar-view.js: 

import React from 'react';
import './SearchBar.scss'; // Import styles
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch } from '@fortawesome/pro-regular-svg-icons';

export const SearchBarView = (props) => {
    return (
      <form className="SearchBar columns is-variable is-2" onSubmit={props.onSearch}>
        <div className="column">
          <p className="control has-icons-left">
            <input className="input is-large" placeholder="Enter a song, album, or artist" onChange={props.onChange} value={props.value} />
            <span className="icon is-small is-left">
              <FontAwesomeIcon icon={faSearch} />
            </span>
          </p>
        </div>
        <div className="column is-narrow">
          <button className="SearchButton button is-large is-primary">Search</button>
        </div>
      </form>
    );
}

SearchResults-container.js: 

import React from 'react';
// Import components
import { SearchResultsView } from './SearchResults-view';

export class SearchResults extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <SearchResultsView searchResults={this.props.searchResults} />
    );
  }
}

SearchResults-view.js: 

import React from 'react';
// Import components
import { Track } from '../../Track';

export const SearchResultsView = (props) => {
  return (
    <>
      <Track searchResults={props.searchResults} />
    </>
  );
}

GitHub репо: https://github.com/edxv/jammming

Ответы [ 2 ]

0 голосов
/ 12 мая 2019

Привет @edx, у меня все работает нормально. Может быть, вы попробуете это еще раз и дайте мне знать. В SPotify.js: 

async search(term) {
    if (userAccessToken === undefined) {
      this.getAccessToken();
      console.log(userAccessToken);
      console.log(expiresIn);
    }

    try {
      const response = await fetch('https://api.spotify.com/v1/search?type=track&q=' + term, {
        method: 'GET',
        headers: {'Authorization': `Bearer ${userAccessToken}`}
      })
      if (response.ok) {
        let jsonResponse = await response.json();
       return jsonResponse.tracks.items;
    }
    catch(error) {
      console.log(error);
    }
  }

В App.js: 

this.state = {
   searchResults : []
}

В трек-контейнере: я попытался взамен:

{this.props.searchResults && this.props.searchResults.map (item => {item.album.name})}
0 голосов
/ 12 мая 2019

Я понял, что происходит. Хотя есть некоторые вещи, которые можно изменить на более идиоматические, код работает.

У вас есть трек двух компонентов. Один является дочерним элементом поиска, а другой - дочерним элементом списка воспроизведения. Компонент Track в Списке воспроизведения не принимает никаких опор, поэтому searchResults не определен. Трек в поиске в порядке, и имеет массив треков.

Это ваш console.log вводит вас в заблуждение. Эти два вызова componentDidUpdate относятся к двум отдельным узлам дерева.

Продолжайте работать над учебником. React Dev Tools показывает, какие реквизиты есть в каждом компоненте, и ваш трек поиска определенно имеет массив.

...