reactjs - 2つのコンポーネント間で項目を前後に移動

Question

私はReactJSを学ぶために取り組んでいる小さな練習をしています。私はiTunesからリストを表示するためにAPI呼び出しを行い、個々のリスト項目をクリックすると、新しいリスト（キューのようなもの）に移動します。新しいリストでクリックすると元のリストに戻りますが、リスト項目は元のリストに戻ったときに新しいリストから削除されません。ここに私の問題のjsfiddleです：https://jsfiddle.net/6k9ncbr6/

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

    this.state = { 
      searchResults: [], 
      moveResults: [] 
    } 

    this.handleEvent = this.handleEvent.bind(this); 
} 

showResults = (response) => { 
    this.setState({ 
     searchResults: response.results, 
     moveResults: [] 
    }) 
} 

search = (URL) => { 
    $.ajax({ 
     type: 'GET', 
     dataType: 'json', 
     url: URL, 
     success: function(response) { 
      this.showResults(response); 
     }.bind(this) 
    }); 
} 

handleEvent = (clickedTrack) => { 
    const { searchResults, moveResults } = this.state; 
    const isInSearchResults = searchResults.some(result => result.trackId === clickedTrack.trackId); 

    this.setState({ 
     searchResults: isInSearchResults ? searchResults.filter(i => i.trackId !== clickedTrack.trackId) : [...searchResults, clickedTrack], 
     moveResults: isInSearchResults ? [...moveResults, clickedTrack] : moveResults.filter(i => i.trackId !== clickedTrack) 
    }); 
} 

componentDidMount() { 
    this.search('https://itunes.apple.com/search?term=broods'); 
} 

render(){ 
    return (
     <div> 
      <Results 
       searchResults={this.state.searchResults} 
       handleEvent={this.handleEvent}/> 
      <Results 
       searchResults={this.state.moveResults} 
       handleEvent={this.handleEvent} /> 
     </div> 
    ); 
    } 
} 
class Results extends React.Component { 
    render(){ 
    const { handleEvent, searchResults } = this.props; 
    return(
     <ul> 
      {this.props.searchResults.map((result, idx) => 
        <ResultItem 
       key={`${result.trackId}-${idx}`} 
       trackName={result.trackName} 
       track={result} 
       handleClick={handleEvent} /> 
        )} 
     </ul> 
    ); 
    } 
} 

    class ResultItem extends React.Component { 
    render(){ 
     const { handleClick, track, trackName } = this.props 
    return <li onClick={() => handleClick(track)}> {trackName} </li>; 
    } 
} 

ReactDOM.render(
    <App />, document.getElementById('root') 
); 

Answer 1

あなたはプロパティ名をオフに左：

moveResults: isInSearchResults ? [...moveResults, clickedTrack] : moveResults.filter(i => i.trackId !== clickedTrack.trackId) 

clickedTrack.trackIdは、既存のコードで.trackIdが不足しています。

ここにはworking jsFiddleがあります。