Создание пользовательской нумерации страниц, но кнопки «Вперед» и «Предыдущая» не работают

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

Я еще не работал над «предыдущей» частью. Я просто пытаюсь заставить "следующий" работать сейчас ...

Answer 1

Есть две проблемы:

1. UNSAFE_componentWillReceiveProps не вызывается при первоначальном рендеринге. Из документов:

React не вызывает UNSAFE_componentWillReceiveProps () с начальными реквизитами во время монтирования. Он вызывает этот метод, только если некоторые реквизиты компонента могут обновляться. Вызов this.setState () обычно не вызывает UNSAFE_componentWillReceiveProps ().

splice изменяет исходный массив, вместо него используйте slice. См. Этот вопрос.

Таким образом, вы можете переместить содержимое 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();
    }
}

Эти функции не выполняютсяt получить параметр: заменить параметр 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,но это может измениться, если вы планируете расширить функциональность.