时间戳

首页 > 解决方案 > 传递带有事件和参数的函数，在 React 中没有无限循环

javascript - 传递带有事件和参数的函数，在 React 中没有无限循环

问题描述

我将 Material UI 库与 React 一起使用，并且我想显示一个 TextField。

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}
      />
    )
  }
}

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

e => handleNumber(e)

这没有帮助。我尝试过的其他事情我无法传递事件或参数。这里的问题是，在我调用setValues()它之后，它会无限地重新渲染父组件，但我不明白为什么：/

标签： javascriptreactjsloopsreact-hooksdom-events

解决方案

const [values, setValues] = useState({})您的代码段中缺少通知。


setValues这里的问题是在渲染函数中调用状态设置器。这不是一个好习惯，您刚刚发现了原因，它会导致无限循环；）

这是流程：

  1. 假设您首先按“a”键（仅出于我的示例，这适用于任何更改输入值的键）。

  2. handleNumber被调用时，它会改变values，通过设置{ [name]: "a" }.

  3. 设置新状态会触发重新渲染。

  4. 渲染函数中的表达式typeof values[name] !== 'undefined'是truesince typeof "a" === "string"，所以会发生另一个重新渲染，这次是{ [name]: 0 }.

  5. 表情typeof values[name] !== 'undefined'仍然是true，因为typeof 0 === "number"。然后我们得到另一个重新渲染，依此类推。

推荐阅读