javascript - 未捕获的 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>