1.Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop。
原因是在为事件传递函数时直接写了setState导致报错。原因是调用setCount,React会重新调用render方法来重新渲染UI。再次渲染函数组件App时导致陷入死循环。
解决办法:如果放在return体内就不会出现这种情况了
export default function App() {
const [count, setCount] = useState(0)
return (
<div>
<h2>当前数值:{count}</h2>
//<button onClick={setCount(count+1)}>+1</button>
//<button onClick={setCount(count-1)}>-1</button>
<button onClick={()=>{setCount(count+1)}}>+1</button>
<button onClick={()=>{setCount(count-1)}}>-1</button>
</div>
)
}
至于为什么后者在点击之后才会执行原因如下
onClick={这里是一个匿名函数或者函数引用}因此:
onClick={this.handleClick(i)}这里包裹的函数其实是一个自执行函数,当解析器执行到这里的时候,handleClick函数会立即执行,并不需要点击才能触发。
onClick={() => this.handleClick(i)},onClick={this.handleClick}这两个函数都不是自执行函数,所以会在点击的时候才触发。这两者的区别又在于,点击时,前者会执行一个匿名函数(箭头函数),在这个函数里调用传参函数(this.handleClick(i)),后者直接调用了this.handleClick,因此this.handleClick(i),this.handleClick都是函数引用。