排序打破随后呈现阵营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组件

回答

相关问题