Есть ли способ сохранить файл в состоянии React?

Question

Я работаю над проектом, в котором мне нужно сохранить изображение в состоянии моих компонентов, чтобы я мог отправить файл и сопутствующие данные другому компоненту, который загружает данные в мою базу данных Firebase и изображение в мой Firestore,

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

Исходное состояние:

state = {
    title: '',
    description: '',
    date: '',
    ticket: '',
    price: '',
    image: []
}

Вход:

<input type="file" id="image" accept="image/*" onChange={this.handleChangeImage} />

Функция, которая являетсядолжен решить мою проблему:

handleChangeImage = (e) => {
    const file = e.target.files[0];
    this.setState({
        [e.target.id]: file
    });
}

Если я запишу в консоль переменную "файл", я получу файл, но консоль регистрации state.image просто покажет мне пустой массив.

Answer 1

Попробуйте изменить функцию дескриптора на это:

handleChangeImage = (e) => {
  const file = e.target.files[0];
  const newImages = [...this.state.image];
  newImages.push(file);
  this.setState({
    image: newImages
  });
}

Answer 2

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

Состояние всегда обновлялось файлом, я просто никогда не осознавал.

Другими словами, проблема была не проблемой, а просто глупой ошибкой новичка.