В этом руководстве мы покажем, как создать таблицу данных разбивки на страницы с помощью React, используя react-data-table-component и внешний API от MeCallAPI.com.
Вы можете попробовать вызвать API, просто запросив его по URL-адресу: https://www.mecallapi.com/api/attractions?page=1&per_page=10.
Установка программы
- Node.js https://nodejs.org
Давай начнем!
Создайте первоначальный проект React:
npx create-react-app react-datatable cd react-datatable
Установите React-Data-Table-Component:
npm install react-data-table-component
Запустите приложение React:
npm start
Откройте https://localhost:3000 в веб-браузере, чтобы увидеть результат:
Изменить App.js
Позвольте мне немного объяснить Кодекс:
- columns (строки 4–36) — это массив, определенный как столбец для таблицы данных.
- Определите State (строка 42) items и функцию setItems для установки значения items. Мы вызовем API и сохраним данные ответа в элементах.
- Определите States (строки 43 и 44) totalRows для хранения количества строк/данных из API и perPageдля хранения количества строк, отображаемых на страница.
- Определите функцию useEffect (строки 46–48) как Effect Hook, которая будет вызываться при загрузке компонента. Мы также включили perPage в качестве зависимости для React Hook useEffect, который будет вызываться при изменении значения perPage. В нашем случае будет вызвана функция fetchData.
- Определите функцию fetchData(строки 50–64)для вызова API, например: https://www.mecallapi.com/api/attractions?page=1&per_page =10, чтобы получить список достопримечательностей, хранящихся в состоянии элементов в React.
- Определите функцию handlePageChange (строки 66–68), которая будет выполняться при изменении страницы в таблице данных.
- Определите функцию handlePerRowsChange (строки 70–72), которая будет выполняться при изменении количества строк на странице в таблице данных.
- Компонент DataTable отображается в строке 80–89 с параметрами для включения удаленной нумерации страниц (paginationServer).
Результат:
Заключение
Вот и все. Надеюсь, это поможет вам понять основы React и то, как использовать таблицу данных с API. Увидимся в следующей статье!
Статья Карна Йонгсиривита, доктора философии. Колледж цифровых инновационных технологий Университета Рангсит
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.