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 you have read our privacy policy.

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