Question

对于编码，尤其是对React来说，是一个全新的概念。看过其他类似的问题，但似乎无法将答案应用于我的代码。

我正在尝试在输入长度达到5时更新“验证”状态，并且出现“超出最大更新深度”错误。据我了解，当长度达到5时，它将重新渲染DOM，发现长度= 5，因此开始递归调用自身（如果我输入错了，请纠正我！），因此我试图弄清楚仅在数字达到5时执行一次validationHandler（）。

class App extends Component {

  state = {
    inputLength: '0',
    validate: 'Too short'
  }

  changeHandler = (event) => {

    this.setState({ inputLength: event.target.value.length });

  };

   validationHandler = () => {
     if (this.state.inputLength > 4) {
       this.setState({ validate: "Enough"})
     }
  };

  render() {
    return (
      <div className="App">

        <input
          type="text"
          onChange={this.changeHandler.bind(this)}
        />

        <Validation 
        change={this.validationHandler()}
        validate={this.state.validate}/>

      </div>
    );
  }
}

我有一个单独的验证组件。

const validation = (props) => {

     return (
        <div className="validation">
            <p onChange={props.change}>{props.validate}</p>
        </div>
    )
};

谢谢！

Answer 1

您遇到的问题与ReactJS: Maximum update depth exceeded error完全相同。

但是，在应用解决方案时，即

<Validation 
  change={this.validationHandler}
  validate={this.state.validate}/>

将解决该错误，但不会使您的应用正常运行。由于validationHandler元素不会触发p事件，因此永远不会调用change方法。

<p onChange={props.change}>{props.validate}</p>

相反，无论何时输入更改，您都希望验证输入长度，因此应该在changeHandler方法内部进行：

  changeHandler = (event) => {

    this.setState({
      inputLength: event.target.value.length, // remove if not needed
      validate: event.target.value.length > 4 ? "Enough" : "Too short",
    });

  };

和

  render() {
    return (
      <div className="App">

        <input
          type="text"
          onChange={this.changeHandler}
        />

        <Validation validate={this.state.validate}/>
      </div>
    );
  }

调用.bind(this)无效，因为this.changeHandler是箭头功能。

Answer 2

将代码更改为以下

class App extends Component {

  state = {
    validate: 'Too short'
  }

  changeHandler = (event) => {
    if (event.target.value.length > 4) {
       this.setState({ validate: "Enough"})
    } else {
       this.setState({ validate: "Too short"})
    }
  };

  render() {
    return (
      <div className="App">

        <input
          type="text"
          onChange={this.changeHandler.bind(this)}
        />

        <Validation 
        validate={this.state.validate}/>

      </div>
    );
  }
}

及其组成部分

const validation = (props) => {

     return (
        <div className="validation">
            <p>{props.validate}</p>
        </div>
    )
};

反应：长度验证，超过最大更新深度

2 个答案: