состояние пусто при определении изображения

Question

Я создаю загрузку изображения, но когда я выбираю изображение и помещаю свойства изображения в состояние, состояние становится пустым.

код:

export default function UploadImage() {
  const [image, setImage] = React.useState(null);

  function imageSelectedHandle(event) {
    setImage(event.target.files[0]);
  }

  return (
    <>
      <AdvertiserPhoto for="image">
        <div>
          <img src={!me ? noPhoto : verifyPhoto(me.profile_image)} alt="" />
          <IconCam color="white" width="40" height="30" />
        </div>
      </AdvertiserPhoto>
      <input
        type="file"
        id="image"
        name="image"
        style={{ display: "none" }}
        accept="image/jpg"
        onChange={imageSelectedHandle}
      />
    </>
  );
}

Answer 1

Сначала необходимо прочитать файл изображения, чтобы показать

Вот рабочая демонстрация с некоторыми изменениями, поскольку у меня нет кода для других компонентов

https://codesandbox.io/s/modest-glitter-b48w3?file= / src / App. js: 129-348

function imageSelectedHandle(event) {
    const [file] = event.target.files;
    var reader = new FileReader();
    reader.readAsDataURL(file);

   reader.onloadend = function (e) {
    setImage(reader.result)
   }
}

Или

function imageSelectedHandle(event) {
    const [file] = event.target.files;
    setImage(URL.createObjectURL(file));
}