排序打破隨後呈現陣營JS組件

我有一個數組closedPeriods，看起來像這樣：排序打破隨後呈現陣營JS組件

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" } 
    ] 
}

我有選擇的投資組合，然後與投資組合的手，我渲染期間下拉。通過組合

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

過濾器狀態陣列渲染屬於投資期：

<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：我的排序函數可以使用第一渲染。只要我改變投資組合，並改回選定的投資組合，我的分類就會變得混亂。爲什麼？

EDIT

排序問題是由雙重結合到部件的功能的一個引起的。

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

答案中的答案。

來源

2017-07-03 Kyle

我會毫不猶豫地信任上的日期字符串類型轉換。如果在排序函數中使用Date.parse（date_string）而不是僅僅減去數字字符串，你會得到相同的行爲嗎？ – gvfordo

您的選項密鑰應該是唯一的。而他們不是。這可能會影響排序 –

？您如何選擇投資組合？處理程序在哪裏？ –

解決方法是刪除第二個綁定。此外，您不必將該功能提供給目標。您可以使用事件對象來處理name部分。

從

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

要

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

來源

2017-07-03 23:58:55 Kyle

排序打破隨後呈現陣營JS組件

回答

相關問題