как поместить файл в переменную состояния с реагирующими хуками

Question

Я пытаюсь загрузить изображение с помощью реакционных хуков

const [picture, setPicture] = useState();

const onChangePicture = e => {
    console.log('picture: ', picture);
    setPicture(...picture, e.target.files[0]);
};

<input
  type="file"
  //style={{ display: 'none' }}
  onChange={e => onChangePicture(e)}
/>

, однако получаю следующую ошибку:

Uncaught TypeError: picture is not iterable

, когда я изменяю onChangePicture на

setPicture(picture, e.target.files[0]) 

переменная изображения не определена,

любая помощь будет оценена.

Answer 1

Я думаю, что вы хотели сделать:

setPicture([...picture, e.target.files[0]]);

Это объединит первый файл со всеми текущими файлами.

Не забудьте использовать const [picture, setPicture] = useState([]);, чтобы убедиться, что он не сломается в первый раз вокруг

Answer 2

Вы можете передать значение непосредственно в функцию setPicture, чтобы установить переменную состояния изображения.

Попытка:

const [picture, setPicture] = useState(null);

const onChangePicture = e => {
    console.log('picture: ', picture);
    setPicture(e.target.files[0]);
};

<input
  type="file"
  //style={{ display: 'none' }}
  onChange={onChangePicture}
/>