[英]React property disappears
我遇到了傳遞道具的問題。 我正在嘗試在列表中呈現一個對象數組。 但是,prop會返回結果,然后立即將其變為“undefined”。 打開開發工具,在控制台中查看結果。
父組件:
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>
)
}
}
搜索欄:
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>
)
}
}
請注意,這仍在進行中。 因此,仍然需要對許多細節和事件處理程序進行編程。
代替
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} />;
})
要么
.map
沒有return
return properties.map( track => (
<Track key={track.id} track={track} />
))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.