0

Помогите пожалуйста разобраться почему это приводит к ошибке, есть таблица, нужно сделать постраничный вывод и фильтр по дате, только я пытаюсь привязать фильтр по дате все ломается(

Заранее прошу прощения за свой вопрос, я только знакомлюсь с JS и React.

App.js.

class App extends Component {
  state = {
    isLoading: true,
    data: [],
    currentPage: 0,
    startDate: null,
    setStartDate: null,
    endDate: null,
    setEndDate: null,
  };

  async componentDidMount() {
    const response = await fetch(`${apiUrl}`, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });

    const data = await response.json();
    this.setState({
      isLoading: false,
      data: data.payments,
    });
  }

  pageChangeHandler = ({ selected }) =>
    this.setState({ currentPage: selected });

  getFilteredData() {
const { data, startDate, endDate, setEndDate, setStartDate } = this.state;

if (!startDate && !endDate) {
  return data;
}

var result = data.filter((payment) => {
  if (startDate && endDate) {
    return (
      new Date(startDate) < new Date(payment.created_at) &&
      new Date(payment.created_at) < new Date(endDate)
    );
  } else if (!result.length) {
    result = this.state.data;
  }
  return result;
});
  }

  render() {
const pageSize = 5;
const filteredData = this.getFilteredData();
const displayData = _.chunk(filteredData, pageSize)[this.state.currentPage];
const pageCount = Math.ceil(filteredData.length / pageSize);
return (
  <div className="container">
    <MyDateFilter />
    {this.state.isLoading ? <Loader /> : <Table data={displayData} />}
    {this.state.data.length > pageSize ? (
      <ReactPaginate
        previousLabel={"<"}
        nextLabel={">"}
        breakLabel={"..."}
        breakClassName={"break-me"}
        pageCount={pageCount}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={this.pageChangeHandler}
        containerClassName={"pagination"}
        activeClassName={"active"}
        pageClassName="page-payment"
        pageLinkClassName="page-link"
        previousClassName="page-payment"
        nextClassName="page-payment"
        previousLinkClassName="page-link"
        nextLinkClassName="page-link"
        forcePage={this.state.currentPage}
      />
    ) : null}
  </div>
);
  }
}

export default App;
   

Table.js

import React from "react";

export default (props) => (
  <table className="table">
    <thead>
      <tr>
        <th>id</th>
        <th>status</th>
        <th>token</th>
        <th>currency</th>
        <th>product</th>
        <th>redirect_success_url</th>
        <th>redirect_fail_url</th>
        <th>amount</th>
        <th>created_at</th>
        <th>updated_at</th>
        <th>extra_return_param</th>
        <th>operation_type</th>
        <th>order_number</th>
      </tr>
    </thead>
    <tbody>
      {props.data.map((payment) => (
        <tr key={payment.created_at}>
          <td> {payment.id} </td>
          <td> {payment.status} </td>
          <td> {payment.token} </td>
          <td> {payment.currency} </td>
          <td> {payment.product} </td>
          <td> {payment.redirect_success_url} </td>
          <td> {payment.redirect_fail_url} </td>
          <td> {payment.amount} </td>
          <td> {payment.created_at} </td>
          <td> {payment.updated_at} </td>
          <td> {payment.extra_return_param} </td>
          <td> {payment.operation_type} </td>
          <td> {payment.order_number} </td>
        </tr>
      ))}
    </tbody>
  </table>
);

DatePicker.js

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export const MyDateFilter = () => {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);

  

  return (
    <div className="MyDateFilter">
      <span>Start Date:</span>
      <DatePicker selected={startDate} onChange={setStartDate} isClearable />
      <span>End Date:</span>
      <DatePicker selected={endDate} onChange={setEndDate} isClearable />
    </div>
  );
};

export default MyDateFilter;

16
  • у тебя есть флаг isLoading но ты его нигде не используешь
    – Grundy
    26 дек 2020 в 18:20
  • его стоит убрать ?
    – b3Nky
    26 дек 2020 в 18:35
  • его стоит использовать и не рисовать Table если isLoaading = true
    – Grundy
    26 дек 2020 в 18:41
  • Вы об этом ? {this.state.isLoading ? (<Loader />) : (<React.Fragment><MyDateFilter /><Table data={displayData} /></React.Fragment>)}
    – b3Nky
    26 дек 2020 в 18:56
  • да, только еще и для Table, а не только для MyDateFilter
    – Grundy
    26 дек 2020 в 19:04

1 ответ 1

0

Тебе нужно не рендерить data если isLoading=true

Для этого тебе нужно изменить Table.js на следующе

Table.js

import React from "react";

export default (props) => (
  <table className="table">
    <thead>
      <tr>
        <th>id</th>
        <th>status</th>
        <th>token</th>
        <th>currency</th>
        <th>product</th>
        <th>redirect_success_url</th>
        <th>redirect_fail_url</th>
        <th>amount</th>
        <th>created_at</th>
        <th>updated_at</th>
        <th>extra_return_param</th>
        <th>operation_type</th>
        <th>order_number</th>
      </tr>
    </thead>
    <tbody>
      {!isLoading && props.data.map((payment) => (
        <tr key={payment.created_at}>
          <td> {payment.id} </td>
          <td> {payment.status} </td>
          <td> {payment.token} </td>
          <td> {payment.currency} </td>
          <td> {payment.product} </td>
          <td> {payment.redirect_success_url} </td>
          <td> {payment.redirect_fail_url} </td>
          <td> {payment.amount} </td>
          <td> {payment.created_at} </td>
          <td> {payment.updated_at} </td>
          <td> {payment.extra_return_param} </td>
          <td> {payment.operation_type} </td>
          <td> {payment.order_number} </td>
        </tr>
      ))}
    </tbody>
  </table>
);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.