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

我还没有真正从事“上一个”部分的工作。我只是想让“ next”暂时工作...

Answer 1

有两个问题：

UNSAFE_componentWillReceiveProps在初始渲染时未调用。来自文档：

React不会使用初始名称调用UNSAFE_componentWillReceiveProps（）在安装过程中的道具。它仅在以下情况下调用此方法：组件的道具可能会更新。通常调用this.setState（）不会触发UNSAFE_componentWillReceiveProps（）。

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

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

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

1 个答案: