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

Question

我已经检查了所有类似我的问题，但找不到任何对这个案例有用的东西。

请帮忙。

这是我的功能：

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);

我认为问题在于每次更改都会更新。即使我移动鼠标，它也会不断更新。

Answer 1

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

改变

   <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>