Question

非常简单。我正在制作一个按钮，用于根据在输入栏中输入的内容来更改父母的状态。用户键入代码并单击输入后，将调用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>
        );
    }

我做了一些研究，人们说这个错误的一个原因是在render方法中调用函数（即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

我认为可能是因为您在将函数传递给this事件时试图绑定onChange。
与其相反，我建议您使用箭头函数，因此您不必担心绑定到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?

为什么会出现错误：超过最大更新深度。没有无限循环？

2 个答案: