时间戳

首页 > 解决方案 > 反应错误：重新渲染太多。使用箭头功能时

javascript - 反应错误：重新渲染太多。使用箭头功能时

问题描述

我正在制作一个计算器，其中我制作了数字按钮，当按下按钮“7”时，在输入字段中添加 7。

我的方法：
我正在使用 useState 来做到这一点。我制作了一个箭头函数 funinpval，它将数字作为参数中的字符串，然后我通过将相应的数字作为参数传递来将此函数与不同的按钮 onclick 处理程序一起使用。但我收到错误 错误图片

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

export const Calculator = () => {
    const [inpval, setInpval] = useState("")
    
    const funinpval = (num) => {
        setInpval(inpval + num)
    }
    
   return(
   <>
     <input type="text" value={inpval}>
     <button onClick={funinpval("7")}>7</button>
     <button onClick={funinpval("8")}>8</button>
   </>
   )

谁能帮忙

标签： javascriptreactjs

解决方案

     <button onClick={funinpval("7")}>7</button>
     <button onClick={funinpval("8")}>8</button>

您无需等待用户单击按钮来执行功能，而是在每个渲染阶段直接执行它们。这意味着组件渲染 -> 状态更新 -> 新的重新渲染 -> 新的状态更新 -> ...

要解决这个问题：

     <button onClick={() => funinpval("7")}>7</button>
     <button onClick={() => funinpval("8")}>8</button>

推荐阅读