【问题标题】:ERROR: Maximum update depth exceeded. This can happen when a component repeatedly calls [duplicate]错误:超过最大更新深度。当组件重复调用 [重复] 时,可能会发生这种情况
【发布时间】:2018-09-13 12:10:53
【问题描述】:

我是新来的反应,过去几天我一直在玩它。每当我尝试在下面运行这个简单的代码时,它总是给我错误。

“超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况。React 会限制嵌套更新的数量以防止无限循环。”

我不知道为什么,有人可以帮我吗?提前谢谢你。

import React, { Component } from 'react';
import { render } from 'react-dom';



export default class State1 extends React.Component {

  constructor() {
    this.state = { value: "llll" };
  }

  change() {
    setTimeout(()=>{
      this.setState({value:"eeee"});
    },3000);
  }

  change2() {
      this.setState({value:"eeee"});
  }
  
  render() {
    {this.change2()};
    return (
      <div > {this.state.value} </div >
    ) 
  }


}

【问题讨论】:

  • change2 方法中删除 setState 它将起作用。
  • @MayankShukla 为什么使用 setTimeout() 的 change() 函数不会像函数 change2() 那样导致无限循环?
  • 因为你没有在任何地方使用那个函数,而且如果你在点击按钮或者在正确的地方执行那个函数也不会导致无限循环,所以不应该在render方法中直接调用setState。跨度>

标签: javascript reactjs web react-redux


【解决方案1】:

每次调用setState(),你的组件都会调用render方法来反映状态的变化,然后调用change2(),从而导致死循环。

【讨论】:

  • 哦,好吧,这很有道理,谢谢!!!!那么在没有点击事件或 setTimeout 的情况下,我将如何在 react.js 中使用 this.SetState() 呢?这两个场景是我为我工作的两个场景。
  • 另外,为什么使用 setTimeout() 的 change() 函数不会像函数 change2() 那样导致无限循环?
  • change() 仍在导致无限循环,但速度较慢(A setState 将每 3 秒发生一次,导致重新渲染)。您通常会使用 setState 来响应用户交互或 api 响应。
  • 好吧,那么当我等待某种事件侦听器/api 响应时,我只会使用 state 而不是 props 是否可以保存?除此之外,在大多数情况下我会使用 Props?
  • 我现在明白了,你让我的生活变得如此轻松。再次感谢你:)
猜你喜欢
  • 2019-08-12
  • 2020-12-11
  • 2020-10-22
  • 2019-07-25
  • 1970-01-01
  • 2023-04-09
  • 2021-04-29
  • 2021-05-13
  • 2023-03-26
相关资源
最近更新 更多