ReactJS中Maximum update depth exceeded无限循环错误求助

嘿，我来帮你搞定这个无限循环的bug！咱们先捋清楚问题出在哪：

你的Aircraft组件在render方法里调用了DisplayAircraft()，而这个方法内部直接执行了this.props.clk(ac.data[0].ident)——也就是触发父组件Layout的setState。父组件一旦更新状态，就会重新渲染，进而重新渲染Aircraft组件；Aircraft再次渲染时又会调用DisplayAircraft()，再次触发父组件的setState，这就形成了无限循环，最终触发React的最大更新深度限制错误。

解决方案：把回调触发从渲染逻辑中剥离 #

我们需要确保只有当飞机ID真正变化时，才通知父组件更新状态，而不是每次组件渲染都触发回调。这里有两种可靠的方式：

方式一：在数据加载完成时触发一次，后续ID变化时再触发

修改你的Aircraft.js代码，将回调触发逻辑移到生命周期钩子中，避免在渲染流程中调用：

import React, {Component} from "react"
import Loading from "./Loading"

class Aircraft extends Component {
 constructor(props) {
 super(props)
 this.state = { aircraft: [], loading: false, utilized: 0 }
 }

 componentDidMount() {
 this.setState({ loading: true })
 fetch("https://some-endpoint")
 .then(response => {
 if (response.ok) {
 return response.json()
 }
 throw new Error('请求失败，请检查接口')
 })
 .then(myJson => {
 this.setState({ aircraft: myJson, loading: false })
 // 数据首次加载完成时，通知父组件飞机ID
 this.props.clk(myJson.data[0].ident)
 })
 .catch(error => {
 console.error('请求出错:', error);
 this.setState({ loading: false })
 })
 }

 // 监听aircraft状态变化，仅当ID改变时通知父组件
 componentDidUpdate(prevProps, prevState) {
 // 先判断aircraft是否有数据，避免报错
 if (this.state.aircraft.data && prevState.aircraft.data) {
 const currentId = this.state.aircraft.data[0].ident
 const prevId = prevState.aircraft.data[0].ident
 // 只有ID确实变化时，才触发父组件回调
 if (currentId !== prevId) {
 this.props.clk(currentId)
 }
 }
 }

 DisplayAircraft() {
 let ac = this.state.aircraft
 return (
 <div className="acD posRel hidO selected">
 <h2>{ac.data[0].ident}</h2>
 </div>
 )
 }

 render() {
 const {aircraft, loading} = this.state
 return (
 <div className="posRel hidO leftD">
 <h1>Aircrafts</h1>
 { (!aircraft || aircraft.length <= 0 || loading) ? <Loading /> : this.DisplayAircraft() }
 </div>
 )
 }
}

export default Aircraft

方式二：使用条件渲染+状态缓存（可选）

如果你希望更严格控制回调触发时机，还可以在Aircraft组件中新增一个状态缓存当前的飞机ID，只有当新ID和缓存ID不一致时才触发回调：

// 在Aircraft的constructor中新增状态
this.state = { 
  aircraft: [], 
  loading: false, 
  utilized: 0,
  currentAcn: "" // 缓存当前飞机ID
}

// 在fetch成功后或componentDidUpdate中：
const newId = myJson.data[0].ident
if (newId !== this.state.currentAcn) {
  this.setState({ currentAcn: newId })
  this.props.clk(newId)
}

关键修复点总结 #

• 移除DisplayAircraft()方法中的this.props.clk调用，避免渲染时触发父组件状态更新
• 利用componentDidMount处理首次数据加载后的回调通知
• 利用componentDidUpdate监听数据变化，仅当飞机ID真正改变时才通知父组件

这样就能彻底打破无限循环，同时满足你将飞机ID传递给父组件的需求啦！

内容的提问来源于stack exchange，提问作者Si8