Как передавать в пропсах актуальные данные, а не из прошлого рендера?

Question

[KirSupi]

Собственно, код (понятное дело, всё лишнее повырезал):

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'ы, не знаю.

Answer 1

[0xD34F]

Зачем вы дублируете в стейт пропсы? Не надо. Компонент Table - вырезать startDate и endDate, при запросе вместо них использовать props.startDate и props.endDate.

Comments

[KirSupi]

Ну, вообще, да, согласен, просто этот мусор в коде образовался пока пытался пофиксить эту проблему. Но беда-то в том, что это просто сделало код чище, но проблему с датами и календарём не решило...

[0xD34F]

KirSupi, ну а у меня - решило. Вы подумайте - может у вас там ещё где какой "мусор" есть.

[KirSupi]

0xD34F, Да, спасибо большое. Действительно, ещё немного мусора было, но основное - то, что Вы описали. Помогло.