Javascript 错误：超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况

已经有一些人提出了这个问题，但它们几乎是由相同的原因引起的（在原位启动回调，例如

）。然而，这并没有发生在我身上，但我也犯了同样的错误

另外，一些util函数是在幕后定义的

// Parent
export default class SearchArea extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {
                update: '',
                confirmed: '',
                recovered: '',
                deaths: ''
            },
            showDashboard: false
        }
        this.setCountryData = this.setCountryData.bind(this);
        this.showDashboard = this.showDashboard.bind(this);
    }

    setCountryData(data) {
        console.log(data);
        this.setState({
            data: {
                update: data.lastUpdate,
                confirmed: data.confirmed,
                recovered: data.recovered,
                deaths: data.deaths
            }
        });
    }

    showDashboard(toggle) {
        this.setState({ showDashboard: toggle })
    }

    render() {
        return (
            <div>
                <Dropdown onSetCountryData={this.setCountryData} onShowDashboard={this.showDashboard} />
                <Dashboard data={this.state.data} visible={this.state.showDashboard} />
            </div>
        )
    }
}

//父对象
导出默认类SearchArea扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{
更新：“”，
确认：''，
已恢复：“”，
死亡人数：''
},
showDashboard:错误
}
this.setCountryData=this.setCountryData.bind（this）；
this.showDashboard=this.showDashboard.bind（this）；
}
setCountryData（数据）{
控制台日志（数据）；
这是我的国家({
数据：{
更新：data.lastUpdate，
已确认：数据已确认，
已恢复：data.recovered，
死亡：数据。死亡
}
});
}
showDashboard（切换）{
this.setState（{showDashboard:toggle}）
}
render（）{
返回(
)
}
}

//同级1
类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
国家：[]，
当前国家/地区：“”
};
this.handleClick=this.handleClick.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
handleClick（）{
const showCountryData=Fetch（newFetchCountry）.showJSONData；
showCountryData（）。然后（res=>{
常数数据=res[0]；
此.passCountryData（数据）；
})
此.passToggleDashboard（true）；
}
手变（e）{
this.setState（{currentCountry:e.target.value，}）；
此.passToggleDashboard（false）；
}
passCountryData（数据）{
this.props.onSetCountryData（数据）；
}
passToggleDashboard（切换）{
此.props.onShowDashboard（切换）；
}
componentDidMount（）{
let timer=setTimeout（（）=>{
const showCountryList=Fetch（fetchCountryList）.showJSONData；
showCountryList（）。然后（res=>{
const data=res.map（国家=>country）；
this.setState（{countries:data}）
});
清除超时（计时器）；
}, 2000)
}
render（）{
返回(
选择国家：
{this.state.countries.length？
this.state.countries.map（country=>{country.name}）：
加载}
搜寻
)
}
}

//同级2
类Dashboard扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{
更新：“”，
确认：''，
已恢复：“”，
死亡人数：''
}
};
}
componentDidMount（）{
如果（！（.props中的“数据”）{
const showWorldData=Fetch（fetchWorld）.showJSONData；
showWorldData（）。然后（res=>{
常数数据=res[0]；
这是我的国家({
数据：{
更新：data.lastUpdate，
已确认：数据已确认，
已恢复：data.recovered，
死亡：数据。死亡
}
});
});
}
}
componentDidUpdate（）{//此处出错！！！
如果（'data'在此.props中）{
const data=this.props.data；
这是我的国家({
数据：{
更新：data.lastUpdate，
已确认：数据已确认，
已恢复：data.recovered，
死亡：数据。死亡
}
});
}
}
render（）{
常量可见性={
可见性：this.props中的“可见”&！this.props.visible中的“可见”？隐藏“：“可见”
};
返回(
上次更新：{this.state.data.Update | |'Loading…'}
)
}
}
类DashboardItem扩展React.Component{
render（）{
返回(
{this.props.type}:
{this.props.num | | |'加载…'
)
}
}

---

错误出现在

仪表板
组件中的
组件didmount（）
中。我找不到我在哪里无限地触发了重新渲染。
setState方法正在重复更新组件，因为每次
中的“数据”都在更新。props
等于
true
您正在调用
setState
，调用setState默认情况下将更新组件，
组件diddupdate
将再次检查如果此.props中的
“数据”等于
true
，依此类推

您应该为
if
语句设置严格的条件

试试这个

componentDidUpdate(prevProps, prevState) { 
    if ('data' in this.props && this.props.data !== prevProps.data) {
        const data = this.props.data;
        this.setState({
            data: {
                update: data.lastUpdate,
                confirmed: data.confirmed,
                recovered: data.recovered,
                deaths: data.deaths
            }
        });
    }
}

您的问题源于派生状态：依赖于道具的状态，是react中的反模式

这将告诉您更多关于它的信息：


有一些解决方法，但建议您重新构建数据流

// Sibling2
class Dashboard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {
                update: '',
                confirmed: '',
                recovered: '',
                deaths: ''
            }
        };
    }

    componentDidMount() {
        if (!('data' in this.props)) {
            const showWorldData = Fetch(fetchWorld).showJSONData;
            showWorldData().then(res => {
                const data = res[0];
                this.setState({
                    data: {
                        update: data.lastUpdate,
                        confirmed: data.confirmed,
                        recovered: data.recovered,
                        deaths: data.deaths
                    }
                });
            });
         }
    }

    componentDidUpdate() { // Error here!!!
        if ('data' in this.props) {
            const data = this.props.data;
            this.setState({
                data: {
                    update: data.lastUpdate,
                    confirmed: data.confirmed,
                    recovered: data.recovered,
                    deaths: data.deaths
                }
            });
        }
    }

    render() {
        const visibility = {
            visibility: 'visible' in this.props && !this.props.visible ? 'hidden' : 'visible'
        };
        return (
            <section className="dashboard-area" style={visibility}>
                <span>Last Update: {this.state.data.update || 'Loading...'}</span>
                <div className="dashboards">
                    <DashboardItem num={this.state.data.confirmed} type="Confirmed" />
                    <DashboardItem num={this.state.data.recovered} type="Recovered" />
                    <DashboardItem num={this.state.data.deaths} type="Deaths" />
                </div>
            </section>
        )
    }
}

class DashboardItem extends React.Component {
    render() {
        return (
            <div className="dashboard">{this.props.type}: <br /><span>{this.props.num || 'Loading...'}</span></div>
        )
    }
}

componentDidUpdate(prevProps, prevState) { 
    if ('data' in this.props && this.props.data !== prevProps.data) {
        const data = this.props.data;
        this.setState({
            data: {
                update: data.lastUpdate,
                confirmed: data.confirmed,
                recovered: data.recovered,
                deaths: data.deaths
            }
        });
    }
}