Reactjs 在渲染函数中使用setState时出现最大调用堆栈错误

我开始学习它，但找不到解决方案->我有一个输入，当值超过20个字符时，我希望工具提示以键入的完整值显示。我把它都修好了，还可以用。问题是，我得到了一个最大的调用堆栈错误，因为每个按键的状态都在改变-我不确定最好的/正确的方法来处理它。。。任何帮助都将不胜感激

请参阅下面的我的代码和

console.clear（）；
类输入扩展了React.Component{
render（）{
返回(
)
};
}
类工具提示扩展了React.Component{
render（）{
返回(
{this.props.TooltipValue}

)
}
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
消息：“”，
isShowing:错
}
}
onChange（e）{
这是我的国家({
信息：e.target.value
});
}
render（）{
constInputVal=（this.state.message.length）；
如果（输入值>=20）{
this.setState（{isShowing:true}）
} 
//否则{
//this.setState（{isShowing:false}）
// }
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'Main'）
)

为什么在

render

函数中使用

setState

时会出现最大调用堆栈错误

因为当我们执行

setState

时，

React

触发组件的重新渲染，如果执行

setState

内部渲染，那么在

setState

之后，组件将再次渲染，再次找到

setState

再次渲染，它将成为一个无限循环，因此，切勿在渲染方法内部执行任何

setState

查看有关

setState

行为的更多详细信息

---

将该检查放在

render

方法中，而不是放在

onChange

方法中，如下所示：

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

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

并删除这些行：

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

或者，由于

工具提示的显示取决于
输入
元素的值，因此可以避免额外变量，直接使用
工具提示
属性
isShowing
检查输入元素的长度，如下所示：

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

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

=20}
/>
无需为工具提示使用单独的状态，因为它已经取决于状态值，您可以这样做

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

20}>

另外，由于您在
render（）
中使用
setState
，因此会出现错误，因为
setState
会触发重新渲染，从而在
条件变为真时立即开始内线循环

不确定更改渲染内部的状态是否是个好主意-我认为根据DocsHanks mate，渲染需要是纯的，答案非常详细，我不知道设置状态会重新渲染组件。非常有帮助，再次感谢！