Ini contoh jsFiddle saya: https://jsfiddle.net/0se06am5/
class Pagination extends React.Component {
constructor(props) {
super(props);
this.state = { current: 1 };
this.items = ['a', 'b', 'c'];
this.filteredItems = [];
this.prev = this.prev.bind(this);
this.next = this.next.bind(this);
this.set = this.set.bind(this);
this.filter = this.filter.bind(this);
}
componentWillUpdate() {
this.filter();
}
prev() {
this.setState({ current: this.state.current - 1});
}
next() {
this.setState({ current: this.state.current + 1});
}
set(val) {
this.setState({ current: val });
}
filter() {
this.filteredItems = this.items.filter((i, idx) => {
return (idx + 1) === this.state.current;
})
}
render() {
return (
<div>
{this.filteredItems.map((i, idx) => {
return <span key={`item_${idx}`}>{i}</span>;
})}<br />
<span onClick={this.prev}>prev</span>
<span onClick={this.set.bind(this, 1)}>1</span>
<span onClick={this.set.bind(this, 2)}>2</span>
<span onClick={this.set.bind(this, 3)}>3</span>
<span onClick={this.next}>next</span>
<br /><span>current: {this.state.current}</span>
</div>
)
}
}
Ketika Anda mengklik item pagination, Anda menyadari bahwa itu tidak berfungsi dengan benar.
Mengapa metode filter() berjalan terlambat? Di mana alih-alih componentWillUpdate() saya harus memindahkan metode ini atau apa yang harus saya tulis berbeda?
0
mwl
27 Juli 2016, 22:42
Apa sebenarnya yang tidak berfungsi?
– Danny Buonocore
27 Juli 2016, 22:45
Anda harus mengklik dua kali pada pagination untuk mendapatkan item yang difilter dengan benar.
– mwl
27 Juli 2016, 22:46
1 menjawab
Jawaban Terbaik
componentWillUpdate tidak< /strong> dieksekusi di render awal. Pindahkan pemfilteran ke render karena tidak mengubah status itu sendiri, dan filter akan berjalan setiap kali komponen dirender (demo):
render()
{
const items = this.items.filter((i, idx) => {
return (idx + 1) === this.state.current;
}).map((i, idx) => {
return <span key={`item_${idx}`}>{i}</span>;
});
return (
<div>
{items}
<br />
<span onClick={this.prev}>prev</span>
<span onClick={this.set.bind(this, 1)}>1</span>
<span onClick={this.set.bind(this, 2)}>2</span>
<span onClick={this.set.bind(this, 3)}>3</span>
<span onClick={this.next}>next</span>
<br /><span>current: {this.state.current}</span>
</div>
)
}
Anda juga dapat menggabungkan panggilan .filter dan .map menjadi satu panggilan .reduce (demo):
const items = this.items.reduce((arr, i, idx) => {
if((idx + 1) === this.state.current) {
arr.push(
<span key={`item_${idx}`}>{i}</span>
);
}
return arr;
}, []);
2
Ori Drori
27 Juli 2016, 23:04
Terima kasih banyak! Juga terima kasih atas tipnya dengan
– reduce() :)
mwl
27 Juli 2016, 23:21