Передать функцию с параметрами события И, без бесконечного l oop в React - PullRequest
Новая
       7

Передать функцию с параметрами события И, без бесконечного l oop в React

0 голосов
/ 14 апреля 2020

Я использую библиотеку 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 работал, но он вызывал бесконечное l oop, и я не не знаю, как это исправить. Я пытался вызвать метод так:

e => handleNumber(e)

, который не помог. Другие вещи, которые я пробовал, я не смог бы передать событие или параметры. Проблема здесь в том, что после того, как я вызову setValues(), он повторно отображает родительский компонент бесконечно, но я не понимаю почему: /

1 Ответ

1 голос
/ 14 апреля 2020

Уведомление const [values, setValues] = useState({}) отсутствует в вашем фрагменте.

Проблема здесь заключается в вызове установщика состояний setValues внутри функции рендеринга. Это не очень хорошая практика, и вы только что обнаружили, почему это может привести к бесконечным циклам;)

Вот последовательность действий:

  1. Предположим, вы начинаете с нажатия клавиши «a» (только для моего примера, это относится к любой клавише, которая изменила входное значение).

  2. handleNumber вызывается, он изменяет values, путем установки { [name]: "a" }.

  3. Установка нового состояния вызывает повторную визуализацию.

  4. Выражение в вашей функции визуализации typeof values[name] !== 'undefined' равно true, начиная с typeof "a" === "string", поэтому происходит повторное рендеринг, на этот раз с { [name]: 0 }.

  5. Выражение typeof values[name] !== 'undefined' по-прежнему true, начиная с typeof 0 === "number". Затем мы получаем еще один повторный рендеринг и т. Д.

...