Javascript 更新状态时，循环中的react

我有一个react组件，负责使用

fetch

执行网络请求。API响应将显示在组件内的卡上。

我已将状态下的响应结构定义为

movimentos

。但是当用响应更新

filteradatos

函数中的状态时，会创建一个无限循环，无限次执行

fetch

请求。

这是我的密码：

导出类日期选择器扩展组件{
建造师（道具）{
超级（道具）
此.state={
起始日期：“，
结束日期：“，
聚焦输入：“，
movimentos:{}
}
}
filtrarDatos（startDateString、endDateString）{
如果（startDateString！=''&&endDateString！=''）{
常数empresa={
FECHA__INICIAL:startDateString，
FECHA_FINAL:endDateString
};
常量选项={
方法：“POST”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify（empresa）
}
取（'http://localhost:4000/api/movimiento/filtrarfecha，选项）
.然后（（res）=>res.json（））
。然后（（数据）=>{
常量{movimintos}=数据
console.log（{moviminentos}）
this.setState（{moviminentos}）
})
.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”；
返回(
this.setState（{startDate，endDate}）//PropTypes.func.isRequired，
focusedInput={this.state.focusedInput}//PropTypes.oneOf（[START_DATE，END_DATE]）或null，
onFocusChange={focusedInput=>this.setState（{focusedInput}）}//PropTypes.func.isRequired，
EndDatePlaceholder文本={“Fecha inical”}
StartDatePlaceholder文本={“Fecha final”}
displayFormat={“DD/MM/YYYY”}
numberOfMonths={1}
isOutsideRange={（）=>false}
showClearDates={true}
/>
{this.filterdatos（startDateString，endDateString）}
)
}
}

更清楚地说，错误在代码的以下部分，如果我对状态更新进行注释，程序将正常工作，并且只发出一个请求。我是一个新的反应者，我无法理解正在发生的事情

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

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

---

您在渲染体中调用

{this.filterdatos（startDateString，endDateString）}

，然后在此方法中更新状态，因此它会创建一个无限循环，因为在状态更改后react会重新渲染组件。

之所以发生这种情况，是因为

每次重新渲染（状态更改）后都会调用此.filterdatos

，创建无限循环（更改数据、渲染、更改数据、渲染…）

您可以将

{this.filteradatos（startDateString，endDateString）}

移动到

组件didmount

：

删除

{this.filteradatos（startDateString，endDateString）}

在

构造函数

之后添加此

生命周期

函数：

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.filterdatos（startDateString，endDateString）；
}

您应该在

componentDidMount（）

生命周期方法中添加

fetch

调用。建议在此处放置API调用。阅读更多，是的，@mukesh.kumar是正确的！Hi在我的回答中添加了一个示例，展示了如何做到这一点。。