brechen Sortieren auf nachfolgende Rendern in React JS Komponenten

Question

ich ein Array haben closedPeriods die wie folgt aussieht:

this.state = { 
    selectedPortfolio: "", 
    selectedPeriod: "", 
    closedPeriods= [ 
     { portfolio: "foo", period: "june 2017", periodStart: "2017-06-01 00:00:00.000" }, 
     { portfolio: "foo", period: "may 2017", periodStart: "2017-05-01 00:00:00.000" }, 
     { portfolio: "bar", period: "may 2017", periodStart: "2017-05-01 00:00:00.000" } 
    ] 
} 

ich ein Dropdown haben, die das Portfolio auswählt, dann mit dem Portfolio der Hand, ich habe die Zeit bin Rendering.

Filterzustand Array von Portfolio

let periodByPortfolio = []; 
if(this.state.selectedPortfolio) { 
    periodByPortfolio = this.state.closedPeriods 
     .filter(item => item.portfolio === this.state.selectedPortfolio); 
} 

Perioden Rendern zu Portfolio gehör:

<label>Closed Periods</label> 
<select id="closedPeriods"> 
    {periodByPortfolio.sort((previous, current) => current.periodStart - previous.periodStart) 
     .map(option => { 
      return (<option key={option.period} value={option.period}>{option.period}</option>); 
    })} 
</select> 

TLDR: My Sortier-Funktion auf der ersten Render funktioniert. Sobald ich Portfolio ändere und in das ausgewählte Portfolio zurückwechsle, wird meine Sortierung verwürfelt. Warum?

EDIT

Sortierung Problem wurde durch eine der Funktionen Doppelbindung an die Komponente verursacht.

// Bind 1 
constructor() { 
    this.filterOption = this.filterOption.bind(this); 
} 

// Bind 2 
<select id="portfolio" value={this.props.portfolio} onChange={this.filterOption.bind(this, "portfolio")}> 

Lösung in Antwort.

Answer 1

Die Lösung besteht darin, die zweite Bindung zu entfernen. Außerdem müssen Sie der Funktion kein Ziel zuführen. Sie können das Ereignisobjekt verwenden, um den name Teil zu behandeln.

Von

<select id="portfolio" value={this.props.portfolio} onChange={this.filterOption.bind(this, "portfolio")}> 

Um

<select id="portfolio" name="selectedPortfolio" value={this.props.portfolio} onChange={this.filterOption}>