Saya sedang membangun komponen pagination dan saya berjuang untuk menjalankan for loop sehingga saya dapat menghasilkan halaman secara dinamis. Saya awalnya memiliki komponen fungsi, tetapi saya ingin mengubahnya menjadi komponen kelas sehingga saya dapat mengelola status di dalamnya. (Saya tahu, saya bisa menggunakan hook, tetapi saya sedang berlatih komponen kelas saat ini).

Saya awalnya menambahkan for loop dalam metode render tetapi menjalankan loop dua kali karena komponen ir merender dua kali. Kemudian, saya mencoba componentDidMount() tetapi tidak melakukan apa-apa ... kemudian menggunakan componentWillMount() dan berhasil. Namun, saya tahu ini bisa menjadi praktik yang buruk.

Ada ide? Lihat di bawah komponen dengan componentDidMount()

import React, { Component } from 'react';
import styles from './Pagination.module.css';

class Pagination extends Component {
    state = {
        pageNumbers: [],
        selected: '',
    };

    componentDidMount() {
        for (
            let i = 1;
            i <= Math.ceil(this.props.totalDogs / this.props.dogsPerPage);
            i++
        ) {
            this.state.pageNumbers.push(i);
        }
    }

    classActiveForPagineHandler = (number) => {
        this.setState({ selected: number });
    };

    render() {
        return (
            <div className={styles.PaginationContainer}>
                <nav>
                    <ul className={styles.PageListHolder}>
                        {this.state.pageNumbers.map((num) => (
                            <li key={num}>
                                <a
                                    href="!#"
                                    className={
                                        this.state.selected === num
                                            ? styles.Active
                                            : styles.PageActive
                                    }
                                    onClick={() => {
                                        this.props.paginate(num);
                                        // this.props.classActiveForPagineHandler(num);
                                    }}
                                >
                                    {num}
                                </a>
                            </li>
                        ))}
                    </ul>
                </nav>
            </div>
        );
    }
}

export default Pagination;

-1
Carlos Escobar 15 Januari 2021, 13:28

3 jawaban

Jawaban Terbaik

Anda sebaiknya memasukkan semua angka ke array dan kemudian memperbarui status pageNumbers. this.state.pageNumbers.push(i); tidak memperbarui status secara langsung, Anda perlu menggunakan setState setelah perhitungan Anda selesai.

 componentDidMount() {
  const { pageNumbers = [] } = this.state
  const { totalDogs, dogsPerPage } = this.props
  for (let i = 1; i <= Math.ceil(totalDogs / dogsPerPage); i++) {
    pageNumbers.push(i);
  }

  this.setState({ pageNumbers })
}

Tautan demo di sini

0
Naren 15 Januari 2021, 10:51

Anda tidak boleh memperbarui status seperti ini:

this.state.pageNumbers.push(i);

Melakukan hal ini:

  this.setState((s) => {
    return {
        ...s,
        pageNumbers: [...s.pageNumbers, i]
    }
})
0
Kais 15 Januari 2021, 10:33

Jangan mengubah state secara langsung dalam komponen reaksi. Gunakan setState untuk semua pembaruan.

componentDidMount() {
  const pageNumbers = [];
  for (
    let i = 1;
    i <= Math.ceil(this.props.totalDogs / this.props.dogsPerPage);
    i++
  ) {
    pageNumbers.push(i);
  }
  this.setState({ pageNumbers });
}

Atau, Anda dapat menyederhanakan kode menggunakan Array.from untuk kasus ini.

componentDidMount() {
  this.setState({
    pageNumbers: Array.from(
      { length: Math.ceil(this.props.totalDogs / this.props.dogsPerPage) },
      (_, i) => i + 1
    ),
  });
} 
0
Siva K V 15 Januari 2021, 10:44