React开发计算器onClick绑定函数触发Too many re-renders错误如何解决

• 你在给<button>的onClick事件绑定处理函数时，直接书写了funinpval("7")，这会导致组件渲染阶段就直接执行该函数，而非点击时才触发。
• 函数执行后调用setInpval更新状态，状态更新会触发组件重新渲染，渲染时又会再次执行funinpval更新状态，由此进入无限渲染循环，最终抛出Too many re-renders错误。
• 额外的语法问题：你的input标签没有正确自闭合，属于React JSX语法错误。

给onClick绑定一个匿名箭头函数，把funinpval的调用放在这个匿名函数内部，这样只有点击事件触发时，才会执行对应的逻辑。同时建议状态更新使用函数式写法，避免闭包导致的旧值拼接问题。

修正后的完整代码如下：

import React from 'react'
import { useState } from 'react';

export const Calculator = () => {
    const [inpval, setInpval] = useState("")
    
    const funinpval = (num) => {
        // 函数式更新，直接拿到最新的输入框值做拼接
        setInpval(prevInpval => prevInpval + num)
    }
    
   return(
   <>
     {/* 修正input自闭合写法 */}
     <input type="text" value={inpval} />
     {/* 点击时才执行函数调用 */}
     <button onClick={() => funinpval("7")}>7</button>
     <button onClick={() => funinpval("8")}>8</button>
   </>
   )
}

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