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