Реагировать на setState, когда элемент в дочернем обновлении

Я относительно новичок в Javascript и React и пытаюсь собрать страницу для записи праздничных дат. У меня он работает с помощью response-day-picker, отображающего календарь для выбора дат, а затем условно отображающего дочерний компонент, когда у меня есть диапазон дат со следующим:

{from &&
  to && (
    <DaysSelected range = {{ from, to }} setDays = {this.holidayDays} />
  )}

Мой дочерний компонент принимает даты от и до, определяет, сколько дней охватывает диапазон, и отображает соответствующий текст.

Это здорово. Но я бы хотел, чтобы это было сделано, и я не могу этого сделать, - это передать это количество дней родительскому компоненту после того, как он с этим справится.

Что ж, я могу, но мне нужно сделать это с помощью onClick, прикрепленного к кнопке, как показано ниже:

render() {
  const { from, to } = this.props.range;
  const numDays = this.weekDaysOnly(from, to);
  return (
    <div>
      <p>
        Your selected holiday dates covers from: {format(from, "DD/MM/YYYY")}{" "}
        to {format(to, "DD/MM/YYYY")}.
      </p>
      <p>this is {numDays} days in length.</p>
      <br />
      <button onClick = {() => this.props.setDays(numDays)}>
        Confirm Dates
      </button>
    </div>
  );
}

Что я бы хотел, так это передать его обратно, как только он с этим справится, но все способы, которые я пытался заставить это сделать, приводили к ошибкам из-за состояния бесконечного цикла (я предполагаю, потому что setState запускает повторный рендеринг, который затем запускает мой код, чтобы снова отработать дни, что запускает setState и так далее ...)

Я уверен, что мой новичок мешает мне увидеть очевидное решение, и буду признателен любому, кто может указать мне правильное направление?

«Но я бы хотел, чтобы это было сделано, и я не могу заставить это сделать, - это передать это количество дней родительскому компоненту после того, как он с этим справится». Скорее всего, вы захотите вместо этого вычислить numDays в родительском компоненте и передать его в качестве свойств.

Tholle 10.08.2018 16:30

Что такое DaysSelected? Кажется, это не часть сборщика ответов

keul 10.08.2018 17:28

@LucaFabbri - DaysSelected - мой дочерний компонент, который определяет дни и отображает результаты. Он содержит второй блок кода выше.

MarkB 10.08.2018 18:15

@Tholle - Весь код для расчета количества дней находится в дочернем компоненте, поэтому перемещение его к родительскому означало бы полностью удалить дочерний элемент, и я пытался придерживаться принципов компонентности и сохранять простоту моего основного родительского элемента - поэтому он просто отображает или нет дочерний элемент, если есть начало и конец диапазона дат, а затем ребенок выполняет работу и отображает результаты.

MarkB 10.08.2018 18:19

@MarkB Да, держать вещи инкапсулированными - это здорово, но попытка передать данные от дочернего компонента к родительскому идет вразрез с нисходящим потоком данных React.

Tholle 10.08.2018 18:21

@Tholle, но это стандартный шаблон, который задокументирован на самом сайте React и может быть успешно реализован с использованием шаблона обратного вызова, который я реализовал с помощью вызова onClick, прикрепленного к моей кнопке, поэтому я не пытаюсь сделать что-то странное или неподдерживаемое, я Я просто хотел бы знать, как я могу запустить этот обратный вызов, не нажимая кнопку.

MarkB 10.08.2018 18:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
6
35
0

Другие вопросы по теме