Почему очищается поле ввода текста?

Question

[Андрей Иванов]

Привет! Перенес в песочницу большой кусок кода, в надежде что поможете).
Это блок с вводом 2 полей текстовых и 1 полем для прикрепления картинки. Я поймал баг, - сценарий
1) напечатать что то в первом текстовом поле
2) прикрепить файл
3) увидеть что текстовое поле (на 1 шаге которое вводили) очистилось.
Вопрос почему очистилось?
Пробовал дебажить, увидел что onChange в EditorBlockItem выполняется два раза, если идти по сценарию, ставил консоли.лог - без результатов..

Песочница

Comments

[Павел Диденко]

В песочнице ваш баг не воспроизводится. Добавил файл, значение в инпуте осталось

[Андрей Иванов]

Павел Диденко, очень странно
Вот, дублирую

Демонстрация

Answer 1

[twolegs]

const onDrop = useCallback(async (acceptedFiles) => {
    const newImage = acceptedFiles[0];
    let hasError;

    if (newImage.size > allowedMaximumFileSize) {
      hasError = true;

      alert("Размер файла не допустим");
    }

    if (!allowedMimeTypes.includes(newImage.type)) {
      hasError = true;

      alert("Тип файла не допустим");
    }

    if (!hasError) {
      const previewBASE64 = await fileReader(newImage);

      onImageChange(name, { file: newImage, preview: previewBASE64 });
    }
  }, []);

Вот тут у вас в массиве зависимостей нет onImageChange. Соответственно, всегда выполняется onImageChange с изначальным значением (то есть пустыми полями).

P.S. Если добавить в зависимости onImageChange, то мемоизация будет бесполезна, потому выше вы создаете эту функцию каждый рендер.

Comments

[Андрей Иванов]

useCallback рекомендует библиотека react drop zone. Значит после добавления onImageChange в зависимость к const onDrop = useCallback(() => {}, []) превратит useCallback в лишний код ?

[twolegs]

Да, потому что мемоизированная функция будет обновляться каждый рендер.
Поэтому надо дополнительно мемоизировать onImageChange где-то выше.

В EditorBlockItem:

const onChange = useCallback((fieldName, fieldValue) => {
    onContentChange(fieldName, fieldValue, itemValue.id);
  }, [onContentChange])

В DynamicFieldsBlock

const onContentChange = useCallback((fieldName, fieldValue, id) => {
    const copyValue = [...value];
    const newValue = copyValue.map((val) => {
      if (val.id === id) {
        return { ...val, [fieldName]: fieldValue };
      }

      return val;
    });

    onChange(name, newValue);
  }, [onChange, value])

App:

const onChange = useCallback((name, value) => {
    setFormFields((prevState) => ({
      ...prevState,
      [name]: value
    }));
  }, [setFormFields]);

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

[Андрей Иванов]

Спасибо большое, буду думать про оптимизацию теперь)

Answer 2

[Павел Диденко]

const onChange = (name, value) => {
    setFormFields((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };

Вот тут вы заменяете весь объект состояния, поэтому очищается

Comments

[Андрей Иванов]

Не уверен что это так. Потому что я ...prevState мерджу с новым состоянием

[Павел Диденко]

Андрей Иванов, подумайте хорошенько. Вы берете превстейт, а потом перезаписываете передаваемое свойство

[Андрей Иванов]

Павел Диденко, я уже думал, но пока я думаю все так же. Я сохраняю прев стейт и меняю поле "точечно" на то которое уже обновлено как нужно. Почему это работает как нужно до тех пор пока я не задействую поле img, а ведь оно обновляется по такому же сценарию, функция ведь одна и та же