React页面加载时onClick自动触发报Maximum update depth exceeded错误如何解决？

你给button的onClick属性直接传入了add(book.title, book.author)，这属于函数调用语句，而非函数引用。React渲染Form组件时会直接执行这段语句触发add调用，add内部的dispatch会修改store状态，导致上层组件重渲染、再次传入新的add props触发Form重渲染，反复执行add就形成了无限更新循环，最终触发最大更新深度超限报错。

只需要将onClick的绑定值改为函数引用即可，点击时才会触发内部逻辑，两种常用实现方式如下：

• 改动最小的方案：用箭头函数包裹原有调用逻辑
  直接修改button的onClick绑定代码：

  <button type="button" onClick={() => add(book.title, book.author)}>Add Book</button>
  

• 可读性更强的方案：提前封装独立的点击处理函数
  先在Form组件内部定义处理函数：

  const handleAddBook = () => {
    add(book.title, book.author)
  }
  

  再将函数引用绑定到onClick属性：

  <button type="button" onClick={handleAddBook}>Add Book</button>
  

两种方案都可以解决自动触发函数调用的问题，常规表单场景下无性能差异，可根据代码风格偏好选择。

内容的提问来源于stack exchange，提问作者Bishoy Faheem