javascript - 未捕获的RangeError:超出最大调用堆栈大小-ReactJS

我已经解决了像我这样的所有问题，但是找不到适合此案例的任何东西。

请帮忙。

这是我的功能：

renderFields() {
    if (this.props.field) { // some prop

      return (
        <SelectBox
          className="selectbox"
          value={this.state.selectId}
        />
      );
    }
  }

使用位置：

renderAllFields() {
  <div>{this.renderFields()}</div>
}

这将生成以下消息：

Uncaught RangeError: Maximum call stack size exceeded

它可能与React的生命周期有关，但我不确定。

例如，当我检查时：

componentDidUpdate = (prevProps) => {
    console.log('prevProps', prevProps);
    console.log('this.props', this.props);
  };

他们看起来一样。

谢谢。

编辑：

render() {
  return (
    <div>
      <Formsy.Form
         ref="form"
         onChange={this.checkForChange}>
        <Grid fluid className="container__seven--holder">
          {this.renderAllFields()}
        </Grid>
     </Formsy.Form>
    </div>
  )
}

checkForChange()从表单获取值并使用以下命令设置更新状态：

this.setState(updatedState);

我相信问题出在每次更改上。.即使我移动鼠标，它也在不断更新。

最佳答案

由于您没有共享足够的信息或完整的组件代码，我怀疑以下原因可能是

更改

   <Formsy.Form
     ref="form"
     onChange={this.checkForChange}>
    <Grid fluid className="container__seven--holder">
      {this.renderAllFields()}
    </Grid>
 </Formsy.Form>

至

如果您希望checkForChange函数发生事件，则以下解决方案将起作用

    <Formsy.Form
     ref="form"
     onChange={e => this.checkForChange(e)}>
    <Grid fluid className="container__seven--holder">
      {this.renderAllFields()}
    </Grid>
 </Formsy.Form>

如果您不希望checkForChange函数发生事件，则可以使用以下解决方案

    <Formsy.Form
     ref="form"
     onChange={() => this.checkForChange()}>
    <Grid fluid className="container__seven--holder">
      {this.renderAllFields()}
    </Grid>
   </Formsy.Form>

关于javascript - 未捕获的RangeError:超出最大调用堆栈大小-ReactJS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53934524/