React JS组件中后续渲染的排序中断

Question

I have an array closedPeriods that looks like this:

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

I have a dropdown that selects the portfolio, then with the portfolio hand, I am rendering the period.

Filter state array by portfolio

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

Render periods belonging to portfolio:

<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 sorting function works on the first render. As soon as I change Portfolio, and change back to the selected portfolio, my sorting becomes scrambled. Why?

EDIT

Sorting issue was caused by one of the functions double-binding to the component.

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

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

Solution in Answer.

Answer 1

The solution is to remove the second bind. Also, you don't have to feed the function a target. You can use the event object to handle the name part.

From

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

To

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