React JS 组件中后续渲染的排序中断
Sort breaking on subsequent render in React JS components
我有一个数组 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")}>
答案中的解决方案。
解决办法是去掉第二个绑定。此外,您不必为函数提供目标。您可以使用事件对象来处理 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}>
我有一个数组 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")}>
答案中的解决方案。
解决办法是去掉第二个绑定。此外,您不必为函数提供目标。您可以使用事件对象来处理 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}>