问题在这里:onClick={this.handleButtonChange(false)}

当你将this.handleButtonChange(false)传递给onClick时，你实际上是在调用value = false的函数，并将onClick设置为函数的返回值，这是未定义的。同样，调用this.handleButtonChange(false)，然后调用this.setState()，这会触发重新渲染，导致无限渲染循环。

解决方案是在lambda中传递函数:onClick={() => this.handleButtonChange(false)}。在这里，您将onClick设置为等于一个函数，该函数将在单击按钮时调用handleButtonChange(false)。

下面的例子可能会有所帮助:

function handleButtonChange(value){
  console.log("State updated!")
}

console.log(handleButtonChange(false))
//output: State updated!
//output: undefined

console.log(() => handleButtonChange(false))
//output: ()=>{handleButtonChange(false);}

看起来你不小心在你的渲染方法中调用了handleButtonChange方法，你可能想要做onClick={() => this.handleButtonChange(false)}代替。

如果您不想在onClick处理程序中创建lambda，我认为您需要有两个绑定方法，每个参数一个。

在构造函数中:

this.handleButtonChangeRetour = this.handleButtonChange.bind(this, true);
this.handleButtonChangeSingle = this.handleButtonChange.bind(this, false);

在渲染方法中:

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChangeSingle} >Retour</Button>
<Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChangeRetour}>Single Journey</Button>

onClick函数必须传递一个返回handleButtonChange()方法的函数。否则它将自动运行，并以错误/警告结束。使用下面的方法来解决问题。

onClick={() => this.handleButtonChange(false)}

如果您试图在重组中向处理程序添加参数，请确保在处理程序中正确地定义了参数。它本质上是一个咖喱函数，因此您希望确保需要正确数量的参数。本页提供了一个使用参数处理程序的好例子。

示例(摘自链接):

withHandlers({
  handleClick: props => (value1, value2) => event => {
    console.log(event)
    alert(value1 + ' was clicked!')
    props.doSomething(value2)
  },
})

为你的孩子HOC和在父

class MyComponent extends Component {
  static propTypes = {
    handleClick: PropTypes.func, 
  }
  render () {
    const {handleClick} = this.props
    return (
      <div onClick={handleClick(value1, value2)} />
    )
  }
}

这避免了在处理程序中编写匿名函数来修补没有在处理程序中提供足够参数名的问题。

我打电话的时候也出现了同样的错误

this.handleClick = this.handleClick.bind(this);

当handleClick不存在时，在构造函数中

(我擦除了它，不小心在构造函数中留下了“this”绑定语句)。

解决方案=删除“this”绑定语句。

我用来打开弹窗组件的解决方案是reactstrap (React Bootstrap 4组件)。

    class Settings extends Component {
        constructor(props) {
            super(props);

            this.state = {
              popoversOpen: [] // array open popovers
            }
        }

        // toggle my popovers
        togglePopoverHelp = (selected) => (e) => {
            const index = this.state.popoversOpen.indexOf(selected);
            if (index < 0) {
              this.state.popoversOpen.push(selected);
            } else {
              this.state.popoversOpen.splice(index, 1);
            }
            this.setState({ popoversOpen: [...this.state.popoversOpen] });
        }

        render() {
            <div id="settings">
                <button id="PopoverTimer" onClick={this.togglePopoverHelp(1)} className="btn btn-outline-danger" type="button">?</button>
                <Popover placement="left" isOpen={this.state.popoversOpen.includes(1)} target="PopoverTimer" toggle={this.togglePopoverHelp(1)}>
                  <PopoverHeader>Header popover</PopoverHeader>
                  <PopoverBody>Description popover</PopoverBody>
                </Popover>

                <button id="popoverRefresh" onClick={this.togglePopoverHelp(2)} className="btn btn-outline-danger" type="button">?</button>
                <Popover placement="left" isOpen={this.state.popoversOpen.includes(2)} target="popoverRefresh" toggle={this.togglePopoverHelp(2)}>
                  <PopoverHeader>Header popover 2</PopoverHeader>
                  <PopoverBody>Description popover2</PopoverBody>
                </Popover>
            </div>
        }
    }