第二次点击后分页工作

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 在初始渲染中不执行。 将过滤器移动到渲染，因为它不会改变状态本身，并且它应该在组件被渲染时运行（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>
    )
}

您还可以将.filter 和.map 调用合并为一个.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;
}, []);