reactjs - 在渲染函数中使用 setState 的最大调用堆栈错误

Question

我开始学习它，但找不到解决方案 -> 我有一个输入，当该值超过 20 个字符时，我希望显示一个工具提示，其中包含键入的完整值。我已经把它全部建好了并且可以工作了。问题是我收到最大调用堆栈错误，因为每次按键时状态都会发生变化 - 我不确定最好/正确的方法......任何帮助将不胜感激

请参阅下面的代码和 here is the pen

console.clear();

class Input extends React.Component {

  render(){
    return(
      <div>
        <input
          className="main-input"
          onChange={this.props.onChange}
          placeholder={"Tell me something"}
          />
       </div>
    )
  };

}

class Tooltip extends React.Component {

  render(){
    return(
      <div
        className="tooltip"
        data-status={this.props.isShowing}>
        <p>{this.props.TooltipValue}</p>
      </div>
    )
  }
}

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      message: '',
      isShowing: false
    }
  }

  onChange(e) {
      this.setState({
        message: e.target.value
      });
    }

  render(){
    const inputVal = (this.state.message.length);
    if(inputVal >= 20){
      this.setState({isShowing: true})
    } 
    // else {
    //   this.setState({isShowing: false})
    // }

    return(
      <div className="container">
        <Tooltip
          TooltipValue={this.state.message}
          isShowing={this.state.isShowing}
        />
        <Input onChange={this.onChange.bind(this)}/>
      </div>
    )
  }

}


ReactDOM.render(
  <App />,
  document.getElementById('Main')
)

Answer 1

Why maximum call stack error when using setState in render function ?

因为当我们执行setState时，React会触发组件的重新渲染，如果你在render内部执行setstate，那么在之后>setState，组件会再次渲染，再次渲染时会发现setState再次渲染，这会变成无限循环，所以永远不要在render方法中执行任何setState。

检查this answer有关 setState 行为的更多详细信息。

<小时/>

不要将该检查放在 render 方法中，而是将其放在 onChange 方法中，如下所示:

onChange(e) {
    const inputVal = e.target.value;
    this.setState({
        message: inputVal,
        isShowing : inputVal.length > 20 ? true : false
    });
}

并删除这些行:

if(inputVal >= 20){
    this.setState({isShowing: true})
} 
// else {
//   this.setState({isShowing: false})
// }

或者由于Tooltip的显示取决于input元素的值，您可以避免额外的变量并直接使用Tooltip<检查输入元素的长度 属性 isShowing，如下所示:

<Tooltip
    TooltipValue={this.state.message}
    isShowing={this.state.message.length >= 20}
/>