Хук не читает e.target.name (React)

Question

По какой-то причине e.target.name оказывается нулевым в моей функции handleOnChange. Может кто-нибудь объяснить, почему это происходит? это функция onChange ниже ...

const [image, setImage] = useState([]);
const uploadImage = (e) => {
    const files = e.target.files;
    const data = new FormData();
    data.append("file", files[0]);
    data.append("upload_preset", "barberuploads");

    fetch("https://api.cloudinary.com/----", {
      method: "POST",
      body: data,
    })
      .then((res) => res.json())
      .then((response) => {
        // setImage(response.secure_url); // new image URL link to store in database
        setImage({
          ...image,
          [e.target.name]: response.secure_url,
        });
      });
  };

и это моя форма ввода ниже ...

 <input
          type="file"
          name="file"
          placeholder="Image 1"
          onChange={uploadImage}
        ></input>

я получаю сообщение об ошибке «Необработанное отклонение (ошибка типа) не может прочитать имя свойства, равное нулю ». Кроме того, в моих компонентах он не устанавливается. Может кто поможет?

Answer 1

Проблема

React использует события Syntheti c, которые обнуляются и возвращаются обратно в пул событий, а обновления состояния реакции являются асинхронными, поэтому они не обрабатываются немедленно. Объединение событий

SyntheticEvent объединяется. Это означает, что объект SyntheticEvent будет повторно использован и все свойства будут обнулены после вызова обратного вызова события. Это из соображений производительности. Таким образом, вы не можете получить доступ к событию асинхронным способом.

Решение

Сохраните значения из события в обратном вызове и используйте их вместо прямой попытки доступа к объекту события в состоянии обновления.

const uploadImage = (e) => {
    const { files, name } = e.target; // <-- capture name here
    
    const data = new FormData();
    data.append("file", files[0]);
    data.append("upload_preset", "barberuploads");

    fetch("https://api.cloudinary.com/----", {
      method: "POST",
      body: data,
    })
      .then((res) => res.json())
      .then((response) => {
        setImage({
          ...image,
          [name]: response.secure_url, // <-- use saved name value
        });
      });
  };

Answer 2

Причина в том, что события в React являются особыми, а не событиями DOM, и для вашего случая я бы либо сохранил e.target.name в переменной, либо вызвал e.persist() в начале обработчика.

Вы можете найти подробнее здесь