Question

我对传承道具有疑问。我正在尝试在列表中呈现对象数组。但是，该道具返回结果，然后立即将其变为“未定义”。打开开发工具以在控制台中查看结果。

父组件：

import React, { Component } from 'react';
import './App.css';

import { SearchBar } from '../SearchBar/SearchBar.js';
import { SearchResults } from '../SearchResults/SearchResults.js';
import { Playlist } from '../Playlist/Playlist.js';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      searchResults: [
        {
          id: 2011,
          name: 'What Makes A Man',
          artist: 'Man As Machine',
          album: 'Nothing but a thing'
        },
        {
          id: 2056,
          name: 'Pushpin',
          artist: 'Man As Machine',
          album: 'Patterns'
        },
        {
          id: 2099,
          name: 'Zombie',
          artist: 'Man As Machine',
          album: 'Patterns'
        }
      ],
      playlistName: ''
    }
  }

  render() {
    return (
      <div>
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div className="App">
        <SearchBar />
          <div className="App-playlist">
            <SearchResults searchResults={this.state.searchResults}/>
            <Playlist />
        </div>
      </div>
    </div>
    );
  }
}

export default App;

第一个子组件：

import React from 'react';
import './SearchResults.css';

import { Tracklist } from '../Tracklist/Tracklist.js';

export class SearchResults extends React.Component {
  render () {
    return (
      <div className="SearchResults">
        <h2>Results</h2>
        <Tracklist tracks={this.props.searchResults}/>
      </div>
    )
  }
}

目标子组件：

import React from 'react';
import './Tracklist.css';

import { Track } from '../Track/Track.js';

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

  renderTrackList() {
    let properties = this.props.tracks;
    if (properties === undefined){
      return <h3>Sorry, we found no results</h3>
    } else {
      properties.forEach( track => {
        console.log(track);
        return <Track key={track.id} track={track} />;
      })
    }
  }

  render () {
    return (
      <div className="TrackList">
        {this.renderTrackList()}
      </div>
    )
  }
}

为清楚起见，我附加了其他组件。它们如下：播放列表：

import React from 'react';
import './Playlist.css';

import { Tracklist } from '../Tracklist/Tracklist.js';

export class Playlist extends React.Component {
  render() {
    return (
      <div className="Playlist">
        <input defaultValue='New Playlist'/>
          <Tracklist />
        <a className="Playlist-save">SAVE</a>
      </div>
    )
  }
}

searchBar：

import React from 'react';
import './SearchBar.css';

export class SearchBar extends React.Component {
  render() {
    return (
      <div className="SearchBar">
        <input placeholder="Enter A Song, Album, or Artist" />
        <a>SEARCH</a>
      </div>
    );
  }
}

跟踪：

import React from 'react';
import './Track.css';

export class Track extends React.Component {
  renderAction (isRemoval) {
    if (this.props.isRemoval){
      return <a className="Track-action" onClick={this.removeTrack}>-</a>
    } else {
      return <a className="Track-action" onClick={this.addTrack}>+</a>
    }
  }

  render () {
    return (
      <div className="Track">
        <div className="Track-information">
          <h3>{this.props.track.name}</h3>
          <p>{this.props.track.artist} | {this.props.track.album}</p>
        </div>
        <a className="Track-action">{this.renderAction}</a>
      </div>
    )
  }
}

请注意，这仍在进行中。因此，仍然需要对许多详细信息和事件处理程序进行编程。

Answer 1

代替

properties.forEach( track => { console.log(track); return <Track key={track.id} track={track} />; })

写

return properties.map( track => { console.log(track); return <Track key={track.id} track={track} />; })

OR

.map不返回

return properties.map( track => ( console.log(track); <Track key={track.id} track={track} />; ))

反应属性消失

1 个答案: