分页在第二次单击后有效

Question

这是我的jsFiddle示例： 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>
        )
    }
}

当您单击分页项目时，您意识到它无法正常工作。

为什么filter()方法运行到很晚？ 我应该在何处而不是componentWillUpdate()移动此方法，或者应该写些不同的内容？

Answer 1

componentWillUpdate 不在初始渲染中执行。 将过滤移至渲染，因为它不会改变状态本身，并且只要渲染组件就应运行该过滤器（ 演示 ）：

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>
    )
}

您还可以将.filter和.map调用合并为一个.reduce调用（ 演示 ）：

const items = this.items.reduce((arr, i, idx) => {
    if((idx + 1) === this.state.current) {
        arr.push(
            <span key={`item_${idx}`}>{i}</span>
        );
    }

    return arr;
}, []);