Собственно, код (понятное дело, всё лишнее повырезал):
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
export default function DataOutput() {
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
return (
<div id="dataContainer">
{/* Первый календарь для отметки начала временного промежутка */}
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
/>
{/* Второй календарь для отметки конца временного промежутка */}
<DatePicker
selected={endDate}
onChange={date => setEndDate(date)}
minDate={startDate}
/>
<Table startDate={startDate} endDate={endDate} />
</div>
);
}
function Table(props) {
const [data, setData] = useState([]);
const [startDate, setStartDate] = useState(props.startDate);
const [endDate, setEndDate] = useState(props.endDate);
useEffect(() => {
setStartDate(props.startDate);
setEndDate(props.endDate);
{/* Тут я принимаю данные с сервера и записываю в setData(data) */ }
{/* Надо брать с сервера данные за определённый временной промежуток и выдавать их в таблице */ }
fetch('api.ru/?startDate' + startDate + 'endDate' + endDate).then(setData(data));
}, [props.startDate, props.endDate]);
return (
<table>
{/* В отдельной ф-ции генерю <tr>'ки, но тут это ни к чему, лишний код я просто повырезал */}
<TableRows items={data} />
</table>
);
}
Проблема кода вот в чём:
- Когда открывается страница и вставляется компонент, на календариках указывается сегодняшние даты (напр. 25.11.2020 и 25.11.2020), и они же и передаются в Table, в результате чего в таблице выводятся данные за сегодняшний день
- Если поменять, например, дату во втором календаре (напр. 25.11.2020 и 27.11.2020), то компонент рендерится заново и выводятся данные за сегодняшний день (в Table передаются 25.11.2020 и 25.11.2020)
- Если ещё раз поменять дату в одном из календарей (напр. 20.11.2020 и 27.11.2020), то снова происходит ререндеринг и выводятся данные за временной интервал из предыдущего пункта (в Table передаются 25.11.2020 и 27.11.2020)
- Ну и так далее
Т.е. ререндеринг происходит при обновлении дат в календарях, но при этом выводятся данные по датам из предыдущего рендера. Знаю про useRef, несколько часов сидел, делал на них, но безрезультатно, итог почему-то получается такой же. Мб я просто как-то не так вставляю useRef'ы, не знаю.
Средний
