Question

React的新手，为Codecademy项目创建了一个调用Spotify Web API的应用程序。

API调用正在工作：我正在获取访问令牌和到期计时器，然后将歌曲结果返回到数组中。然后，我在App.js中使用setState，以便searchResults = Spotify返回的数组。然后，我将searchResults的{{1}}通过state传递给子组件。

App.js（状态）-> Search-container.js-> Search-view.js-> SearchResults-container.js-> SearchResults-view.js-> Track-container.js

我可以看到props已成功通过state传递，因为我正在将props登录到Track-container.js中的控制台并看到结果数组。

但是，在控制台的下一行，它变为this.props.searchResults。

控制台的屏幕截图：https://i.imgur.com/XkMEb4o.png

控制台：

undefined

每次我在搜索字段（具有onChange处理程序）中键入内容时，Track-container.js中的componentDidUpdate（）方法都会记录到控制台。不确定这是否是React中的预期行为？

我的代码：

Spotify.js：

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

App.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);
    }
  }

};

[... 4个组件中的每个组件都通过道具向下传递状态...]

Track-container.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>
    );
  }
}

最终，在Track-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> ); } }组件，但是由于该数组是<TrackView />，所以我还不能这样做。

编辑：

在出现错误的情况下为搜索组件添加代码。

Search-container.js：

undefined

Search-view.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} />
    );
  }
}

SearchBar-container.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-view.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>
    );
  }
}

SearchResults-container.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-view.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} />
    );
  }
}

GitHub存储库：https://github.com/edxv/jammming

Answer 1

我知道发生了什么事。尽管有些事情可能会变得更加惯用，但代码仍在工作。

您具有跟踪两个组成部分。一个是“搜索”的子级，另一个是“播放列表”的子级。播放列表中的“曲目”组件没有任何道具，因此searchResults是未定义的。搜索中的轨道很好，并且具有轨道阵列。

误导您的是您的console.log。这两个componentDidUpdate调用来自树中的两个不同节点。

继续学习本教程。 React Dev Tools向您显示每个组件上有哪些道具，并且您的Search Track肯定具有数组。

Answer 2

嗨，@ 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 : []
}

在Track-container中：我尝试回报：

{this.props.searchResults && this.props.searchResults.map（item => {item.album.name}）}

反应setState工作，然后变得不确定

2 个答案: