创建自定义分页，但下一个和上一个按钮不起作用

Question

我正在尝试创建自己的分页（不使用包），但无法正常工作。

我想知道这是否与我复制数组的方式有关，但我不太确定。

class InsightSearchResults extends Component {
    state = {
        start: 0,
        end: 2,
        insightsArrayOriginal: [],
        copiedArr: []
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        if (nextProps.insightList[0]) {
            this.setState({
                insightsArrayOriginal: nextProps.insightList[0].insights,
                copiedArr: nextProps.insightList[0].insights.splice(this.state.start, this.state.end)
            })
        }
    }


    clickNext = () => {
        let copied = [...this.state.insightsArrayOriginal];

        this.setState({
            start: this.state.start + 2,
            end: this.state.end + 2
        }, () => {
            this.setState({
                copiedArr: copied.splice(this.state.start, this.state.end)
            })
        })
    }


    clickPrev = () => {
        this.setState({
            start: this.state.start - 2 < 0 ? 0 : this.state.start - 2,
            end: this.state.end - 2
        })
    }

    render() {
        const { copiedArr } = this.state;

        return (
            <div style={{padding: "1.5rem"}}>

                {copiedArr ? copiedArr.map(insight => (
                     <div>
                     <Grid className="insight_result_block">
                        <Col className="insight_results_col2" span="10">
                            <div>
                              <h4>Hello</h4>
                                <p>{insight.insightDesc}</p>
                           </div>
                        </Col>
                     </Grid>
                     <hr className="bottom_hr_insight" />
                     </div>
                )) : <p>loading...</p> }

                <button onClick={this.clickPrev}>Prev</button>
                <button onClick={this.clickNext}>Next</button>
            </div>
        )
    }
}

我还没有真正研究过“prev”部分。我现在只是想让“下一个”工作......

Answer 1

有两个问题：

1. UNSAFE_componentWillReceiveProps 不会在初始渲染时调用。来自文档：

React 不会使用初始值调用 UNSAFE_componentWillReceiveProps() 安装过程中的道具。它仅在某些情况下调用此方法 组件的 props 可能会更新。一般调用 this.setState() 不会触发 UNSAFE_componentWillReceiveProps()。

1. splice 改变原始数组，使用 slice 代替。 See this question.

所以你可以将UNSAFE_componentWillReceiveProps的内容移动到componentDidMount和componentDidUpdate

componentDidMount() {
    this.updateState();
}

componentDidUpdate() {
    // check if a change in props has caused the rerender
    // or you will get infinite rerenders if one state update causes the next one
    if (
      this.props.insightList[0] &&
      this.props.insightList[0].insights !== this.state.insightsArrayOriginal
    ) {
      this.updateState();
    }
}

这些函数不接收参数：将nextProps参数替换为this.props；并将所有出现的splice 更改为slice。

updateState() {
    if (this.props.insightList[0]) {
      this.setState({
        insightsArrayOriginal: this.props.insightList[0].insights,
        copiedArr: this.props.insightList[0].insights.slice( .     // <-here
          this.state.start,
          this.state.end
        )
      });
    }
}

clickNext = () => {
    let copied = [...this.state.insightsArrayOriginal];
    this.setState({ start: this.state.start + 2, end: this.state.end + 2 },
      () => {
        this.setState({
          copiedArr: copied.slice(this.state.start, this.state.end)  // <- and here
        });
      }
    );
};

此外，仅基于此代码示例，您可以从 state 中完全删除 insightsArrayOriginal 并从 props 中使用它，但如果您打算扩展功能，这可能会改变。