为什么我收到错误：超过最大更新深度。当我没有无限循环时？

Question

非常简单。我正在制作一个按钮来根据输入栏中输入的内容更改我父母的状态。在用户键入代码并单击 enter 后，将调用一个 for 循环，该循环遍历数组以确保用户输入的代码存在于数组中。如果代码存在，则调用 this.setState 并更改父级的状态。

但是，在将函数从父组件传递到按钮组件后，如果我什至在输入字段中输入数组中的字符串，我会自动得到一个错误：超出最大更新深度，说明组件重复调用setState - 但是，这甚至是不可能的，因为我还没有点击按钮，所以 for 循环甚至不应该在使用中。 （好吧，我可能不知道为什么要这样做）

这是父母：

constructor(props){
    super(props);

    this.state = {
      roomList: [],
      activeRoom: undefined
    };

    this.onUpdateRooms = this.onUpdateRooms.bind(this);
  }

//function for changing state
  onJoinRoom(roomCode) {
    for(let i = 0; i < this.state.roomList.length; i++){
      if (this.state.roomList[i].roomCode === roomCode) {
        this.setState({activeRoom: roomCode});
        console.log('Found')
      }
    }
  }

//within the render
<JoinButton onJoinRoom={this.onJoinRoom}/>

这是我的按钮类：

constructor (props) {
        super(props)
        this.state = {
          enteredCode: ''
        }
      }

    handleInput(e) {
        this.setState({enteredCode: e.target.value});
    }

    handleClick() {
        this.props.onJoinRoom(this.state.enteredCode);
    }

    render() {
        return (
            <div>
                <input 
                    className="roomCodeInput"
                    type='text'
                    placeholder='Enter A Room Code'
                    onChange={this.handleInput.bind(this)}
                    value={this.state.enteredCode} 
                />
                <button className="join" onClick={this.handleClick(this)}>JOIN</button>
            </div>
        );
    }

我做了一些研究，人们说这个错误的一个原因是在渲染方法中调用函数（即 onClick={this.props.function()} 而不是没有括号的 .function）。但是，我正在使用 handleClick 并绑定它，所以我不相信我的问题是一样的。另外，我需要传递函数参数，所以括号是必要的。

现在真的很困惑，希望得到一些帮助：/

Answer 1

您需要做的第一件事是将函数绑定到构造函数中的相应组件，因为当您执行设置状态或使用事件等操作时。 React 不知道在什么上下文中做这些事情。

this.onJoinRoom = this.onJoinRoom.bind(this); 会将函数绑定到父类。

你需要对按钮类做同样的事情

this.handleClick = this.handleClick.bind(this);
this.handleInput = this.handleInput.bind(this);

然后简单地调用构造函数中定义的函数；没有括号。

<div>
    <input 
        className="roomCodeInput"
        type='text'
        placeholder='Enter A Room Code' 
        onChange={this.handleInput}
        value={this.state.enteredCode} 
    />
    <button className="join" onClick={this.handleClick}>JOIN</button>
</div>

Answer 2

我认为这可能是因为您在将函数传递给 onChange 事件时尝试绑定 this。
相反，我建议您使用箭头函数，因此您不必担心绑定到this。
只需如下更改您的handleInput 函数

handleInput = (e) => {
      this.setState({enteredCode: e.target.value});
    }

然后您可以像这样简单地将handleInput 传递给您的事件处理程序

 <input 
     className="roomCodeInput"
     type='text'
     placeholder='Enter A Room Code'
     onChange={this.handleInput}  //need not bind this
     value={this.state.enteredCode} 
     />

同样在您的父级内部，您还没有将this 绑定到onJoinRoom 处理程序，因此您需要将其转换为箭头函数，或者您可以在构造函数内部绑定到this。
箭头和普通功能的区别见这个问题-
Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?