React: предупреждение "A component is changing an uncontrolled input of type text to be controlled"

Предупреждение "A component is changing an uncontrolled input of type text to be controlled" возникает в React, когда компонент меняет состояние элемента input с неконтролируемого на контролируемое. Рассмотрим, что означает это предупреждение, почему оно появляется и как можно избежать таких ошибок.

Причины предупреждения

В React элементы ввода могут быть либо контролируемыми, либо неконтролируемыми:

• Контролируемые элементы: Их состояние управляется React через значение, переданное как value и обновляемое при каждом изменении.
• Неконтролируемые элементы: React не управляет их значением напрямую, вместо этого значение хранится в самом DOM, и обновление происходит через ref или при отправке формы.

Когда в React компонент пытается изменить input с неконтролируемого на контролируемое состояние (например, с undefined на пустую строку ""), это вызывает предупреждение.

Пример возникновения предупреждения

Предположим, мы создаем форму с полем input, значение которого зависит от состояния. Если состояние изначально не определено, input будет неконтролируемым, но при обновлении станет контролируемым, что вызовет предупреждение:

import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState();

  return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

Здесь name инициализируется как undefined, поэтому input становится неконтролируемым, пока не произойдет первое изменение состояния.

Исправление ошибки: инициализация состояния

Чтобы избежать предупреждения, следует сразу инициализировать состояние контролируемым значением, например, пустой строкой "":

import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState("");

  return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

Теперь input всегда будет контролируемым, и предупреждение исчезнет.

Контролируемые и неконтролируемые элементы: когда использовать

Контролируемые элементы позволяют управлять состоянием компонента и чаще всего предпочтительнее, так как дают возможность отслеживать и изменять значение с помощью пропсов. Неконтролируемые элементы полезны в случаях, когда компонент не нуждается в постоянном отслеживании состояния.

Рекомендации по работе с формами в React

• При инициализации состояния используйте пустые строки для текстовых полей, чтобы избежать неконтролируемых значений.
• В случаях, когда нужно сохранить состояние вне React, используйте ref для работы с неконтролируемыми элементами.
• Если компоненту требуется состояние только при отправке формы, неконтролируемые элементы могут быть подходящим выбором.

Дополнительные ресурсы и вакансии

Изучите наши статьи, чтобы глубже разобраться в работе с состоянием и управлением в React: о проблеме с методами массивов в React и о создании системы доступа к компонентам на основе ролей.