Javascript 传递带有事件和参数的函数，在React中不使用无限循环

我将材质UI库与React一起使用，并希望显示一个文本字段

const Input = memo(
({ type, name, required, placeholder }) => {
  console.log(type)
  if (type === 'number') {
    // Init input value
    if (typeof values[name] !== 'undefined') {
      setValues({ ...values, [name]: 0 })
    }

    let handleNumber = e => {
      console.log(e.target.value)
      setValues({ ...values, [name]: e.target.value })
    }

    return (
      <TextField
        required={required}
        type="number"
        id={name}
        label="Numéro du collier"
        name={name}
        margin="normal"
        variant="outlined"
        className="addAnimal-input"
        value={values[name]}
        // onFocus={setIsSidebarOpen(true)}
        onChange={handleNumber}
        // onBlur={validate(name)}
        // error={errors[name]}
        placeholder={placeholder}
      />
    )
  }
}

const Input=memo(
（{类型、名称、必填项、占位符}）=>{
console.log（类型）
如果（类型=='number'）{
//初始输入值
如果（值的类型[名称]！=='未定义'）{
setValues（{…值，[名称]：0}）
}
让handleNumber=e=>{
console.log（例如target.value）
setValues（{…值，[名称]：e.target.value}）
}
返回(
)
}
}

现在我希望onChange方法能够工作，但它会导致无限循环，我不知道如何修复它。 我尝试这样调用该方法：

e=>handleNumber（e）

这没用。 其他我尝试过的事情，我无法通过事件或参数。

---

这里的问题是，在我调用

setValues（）

之后，它会无限地重新呈现父组件，但我不明白为什么：/

注意

const[values，setValues]=useState（{}）

在代码段中丢失了

这里的问题是在render函数中调用状态设置器

setValues

。 这不是一个好的实践，您刚刚发现了为什么，它会导致无限循环；）

以下是流程：

假设您首先点击键“a”（为了我的示例，这适用于更改输入值的任何键）

调用

handleNumber

，它通过设置

{[name]：“a”}

来更改

值

设置新状态将触发重新渲染

渲染函数中的表达式

typeof value[name]！='未定义的“

为

true

，因为

类型为“a”==“string”

，所以会发生另一次重新渲染，这次是使用

{[name]：0}

表达式

typeof value[name]！='未定义的“

仍然是

true

，因为

typeof 0==“number”

。然后我们再进行一次重新渲染，依此类推

---

设置值从哪里来？我在您的代码中看不到任何
useState
。另外，
init输入值
是否可以删除该值并进行检查？