ReactJS：隐藏文本会产生错误：超出最大更新深度

Question

我只是无法使用课程形式的按钮来隐藏我的文本（标题）。我在下面尝试此代码：

constructor(props){
  super(props)
  this.state = {
    showHeader: true,
  }
}

并且我使用setState渲染上面的状态：

render () {
  return (
    <div>
      {this.state.showHeader && <Header /> }
      <button onClick={ this.setState({showHeader: false})} >Hide</button>
    </div>

我知道这是一个愚蠢的问题，但是我无法自拔，因为我是一个完全初学者。但是我使用函数正确地做到了这一点，我只想尝试使用类将其转换。这是我使用函数所做的：

const [show, setShow] = React.useState(true);
const hideHeader = () => {
  setShow(!show)
}

并返回此：

 return (
    <div>
      {show && <Header />}
      <button onClick={hideHeader}>Hide Header</button>
    </div>
  )

Answer 1

现在，您正在渲染函数中调用setState()。这会引起问题，因为setState导致您的render方法被调用，并且如果您的渲染方法直接调用setState，则会陷入循环。

您需要做的是在一个偶数处理程序中调用它：

// bad
onClick={this.setState({showHeader: false})}
// good
onClick={() => this.setState({showHeader: false})}

所以您的按钮应如下所示：

<button onClick={() => this.setState({showHeader: false})} >Hide</button>

来自the docs：

render()函数应该是纯函数，这意味着它不会修改组件状态，每次调用都会返回相同的结果，并且不会直接与浏览器进行交互。