React JS組件中后續渲染的排序中斷

Question

我有一個closedPeriods數組，看起來像這樣：

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：我的排序功能適用於第一個渲染。 一旦更改投資組合，然后又回到選定的投資組合，我的排序就會變得混亂。 為什么？

編輯

排序問題是由與組件雙重綁定的功能之一引起的。

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

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

解決方案。

Answer 1

解決方法是刪除第二個綁定。 另外，您不必向函數提供目標。 您可以使用事件對象來處理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}>