@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'ы, не знаю.
  • Вопрос задан
  • 47 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Зачем вы дублируете в стейт пропсы? Не надо. Компонент Table - вырезать startDate и endDate, при запросе вместо них использовать props.startDate и props.endDate.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы