Javascript 多次调用组件：范围错误

我有这个上传组件。当我运行它时，它会打印多行，最后将错误显示为未捕获的RangeError：超出了最大调用堆栈大小

---

好像它在上传前和上传后多次调用。我在这里找不到任何错误。

你的方法是错误的。您正在调用此。afterUpload；内部渲染。和this.afterUpload调用setState，setState反过来调用render方法，这将导致对this.afterUpload的另一个调用；因此形成了一个循环。记住，每次调用setState方法时，组件都会重新呈现

选中此项：

组件渲染。在render方法内部，调用this.beforeUploadget

在beforeUpload内部，this.setState{isUpload:true}；将再次调用render方法，这次调用this.afterUpload

在this.afterUpload中，this.setState{isUpload:false}将再次调用render，这次将调用this.beforeUpload

重复上述步骤。。因此形成了一个循环

建议的方法

---

如果我想根据条件呈现afterUpload和beforeUpload，那么应该怎么做？您可以在componentDidMount或componentWillMount内调用此方法

class Upload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isUpload: false
    };
    this.afterUpload = this.afterUpload.bind(this);
    this.beforeUpload = this.beforeUpload.bind(this);
  }

beforeUpload(props) {
  this.setState({isUpload: true});
  return (
    <div>
      <h2>Before Upload</h2>
    </div>
  )

}

afterUpload(props) {
  this.setState({isUpload: false});
  return (
    <div>
      <h1>After upload</h1>
    </div>
  )

}

render() {
  const isUpload = this.state.isUpload;
  console.log("state..." + isUpload);
  if(isUpload)
    return this.afterUpload();
  return this.beforeUpload();
}
}

componentWillMount(){
   this.beforeUpload()
} 


beforeUpload(props) {
  this.setState({isUpload: true},()=>{//Put return statement inside setState callback
     return (
    <div>
      <h2>Before Upload</h2>
    </div>
  )
 });


}