Как избежать бесконечного цикла повторного рендеринга, когда вам нужно установить состояние в Render ()?

Question

У меня есть родительский компонент класса с состояниями (startDate и EndDate), которые устанавливаются дочерним компонентом. Дочерний Компонент содержит компоненты выбора даты. Смотрите код ниже для родительских и дочерних компонентов:

Родитель

import React, { Component } from 'react';
import Child from './child-component'

class Parent extends Component {

state = {
  startDate: null,
  endDate: null,
}

startDSelected = (startD) => {
  this.setState({
    startDate: startD,
  })
}

endDSelected = (endD) => {
  this.setState({
    endDate: endD,
  })
}

  render() {
    return (
      <div>
        <Child selectedStartDate={startDSelected} selectedEndDate={endDSelected}>
      </div>
    );
  }

}

export default Parent;

Child

import React, { Component } from 'react'

import { DatePicker } from "antd"

class Child extends Component {

  constructor(props) {
    super(props)
    this.state = {
      startValue: null,
      endValue: null,
      endOpen: false,
    }
  }

  onStartChange = (value) => {
    this.setState({
      startValue: value
    })
  }

  onEndChange = (value) => {
    this.setState({
      endValue: value
    })
  }

  handleStartOpenChange = (open) => {
    if (!open) {
      this.setState({ endOpen: true })
    }
  }

  handleEndOpenChange = (open) => {
    this.setState({ endOpen: open })
  }

  datesGetChanged = () => {
    const { startValue, endValue } = this.state
    this.props.selectedStartDate(startValue)
    this.props.selectedEndDate(endValue)
  }

  render() {
    const { startValue, endValue, endOpen } = this.state
    this.datesGetChanged()
    return (
      <div style={{ display: `inline-block` }}>
        <DatePicker
          format="YYYY-MM-DD"
          value={startValue}
          placeholder="Start"
          onChange={this.onStartChange}
          onOpenChange={this.handleStartOpenChange}\
          />
          <DatePicker
          format="YYYY-MM-DD"
          value={endValue}
          placeholder="End"
          onChange={this.onEndChange}
          open={endOpen}
          onOpenChange={this.handleEndOpenChange}
          />
      </div>
    )
  }

}

export default Child;

Так что каждый раз, когда мне нужно установить родительские состояния, когда новые значения даты изменяются в дочернем компоненте, я получаю повторный рендеринг с бесконечным циклом. Как это предотвратить?

Answer 1

Подводя итог нескольким комментариям, которые я видел, вы должны удалить this.datesGetChanged() из вашей функции render. Если состояние родителя должно обновляться при изменении состояния потомка, то обновлять состояние родителя при изменении состояния потомка. В вашем коде это были бы функции onChange в ваших средствах выбора даты.

render - это то, что React делает по своему собственному расписанию, а вызов функции изменения состояния внутри него - это рецепт для бесконечных циклов, которые вы описываете.

Чтобы процитировать документы React:

Функция render () должна быть чистой, то есть она не изменяет состояние компонента, возвращает один и тот же результат при каждом вызове и не взаимодействует напрямую с браузером.

визуализация документов

Answer 2

componentDidUpdate(prevProps) {

this.datesGetChanged()

}