在React JS组件中对后续渲染进行排序

时间:2017-07-03 18:58:21

标签: javascript reactjs sorting react-dom

我有一个如下所示的数组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")}>

答案中的解决方案。

1 个答案:

答案 0 :(得分:0)

解决方案是删除第二个绑定。此外,您不必将功能作为目标提供。您可以使用事件对象来处理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}>