javascript - 更新状态时循环 react

Question

我有一个 React 组件，负责使用 fetch 执行网络请求。 API 响应将显示在组件内的卡片上。

我已将状态中的响应结构定义为 movimientos。但是，当使用响应更新 filtrarDatos 函数内的状态时，会创建一个无限循环，并且无限执行 fetch 请求。

这是我的代码:

export class Datepicker extends Component {

   constructor(props) {
       super(props)
       this.state = {
           startDate: "",
           endDate: "",
           focusedInput: "",
           movimientos: {}
       }
   }

   filtrarDatos(startDateString, endDateString) {
       if (startDateString !== '' && endDateString !== '') {
           const empresa = {
               FECHA_INICIAL: startDateString,
               FECHA_FINAL: endDateString
           };

           const options = {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify(empresa)

           }

           fetch('http://localhost:4000/api/movimiento/filtrarfecha', options)
               .then((res) => res.json())
               .then((data) => {
                   const { movimientos } = data
                   console.log({ movimientos })
                   this.setState({ movimientos })
               })
               .catch((err) => console.log(err))
       }
   }

   render() {
       const endDateString = this.state.endDate && this.state.endDate.format('YYYY-MM-DD') + "T13:47:14.985+00:00";
       const startDateString = this.state.startDate && this.state.startDate.format('YYYY-MM-DD') + "T13:47:14.985+00:00";

       return (
           <div className="DatePicker">
               <DateRangePicker
                   startDate={this.state.startDate} // momentPropTypes.momentObj or null,
                   endDate={this.state.endDate} // momentPropTypes.momentObj or null,
                   onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
                   focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
                   onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
                   endDatePlaceholderText={"Fecha inicial"}
                   startDatePlaceholderText={"Fecha final"}
                   displayFormat={"DD/MM/YYYY"}
                   numberOfMonths={1}
                   isOutsideRange={() => false}
                   showClearDates={true}
               />
               {this.filtrarDatos(startDateString, endDateString)}
           </div>
       )
   }
}

更清楚地说，错误出现在代码的以下部分中，如果我对状态更新进行评论，程序将正常工作并且仅发出单个请求。我是个新手，无法理解发生了什么。

.then((data) => {
    const { movimientos } = data
    console.log({ movimientos })
    this.setState({ movimientos })
})

这是我的控制台在无限网络请求期间的屏幕截图

Answer 1

发生这种情况是因为每次重新渲染(状态更改)后都会调用 this.filtrarDatos，从而创建无限循环(更改数据、渲染、更改数据、渲染...)

您可以将{ this.filtrarDatos(startDateString, endDateString) }移动到componentDidMount:

1. 删除 { this.filtrarDatos(startDateString, endDateString) }
2. 在构造函数之后添加此lifecycle函数:

componentDidMount() {
  const endDateString = this.state.endDate && this.state.endDate.format('YYYY-MM-DD') + "T13:47:14.985+00:00";
  const startDateString = this.state.startDate && this.state.startDate.format('YYYY-MM-DD') + "T13:47:14.985+00:00";

  this.filtrarDatos(startDateString, endDateString);
}