URL изображения не отображается после выбора файла - PullRequest
Новая
       11

URL изображения не отображается после выбора файла

1 голос
/ 05 июля 2019

Я работаю через следующий код.Я ожидал, что console.log отобразит URL выбранного изображения.Но он отображается пустым.Реализация песочницы: здесь 

import React, {useState} from 'react';
import FormControl from "@material-ui/core/FormControl";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import './App.css';

function App() {
  const [fileUrl, setFileUrl] = useState("");
  const [file, setFile] = useState("");

  const handleAudioChange = event => {
    const selectedFile = event.target.files[0];
    setFileUrl(URL.createObjectURL(event.target.files[0]));
    console.log("fileUrl")
    console.log(fileUrl)
    setFile(selectedFile);
  };

  return (
    <div>
      <Dialog
        open={true}>          
        <DialogTitle>Meme Generator Text</DialogTitle>                      
        <FormControl >
          <input
            id="image"
            required
            type="file"
            style={{visibility:"hidden"}}
            accept="image/*"
            onChange={handleAudioChange}
          />
          <label htmlFor="image">
            <Button
              variant="outlined"
              component="span"
            >
              Picture File
            </Button>              
          </label>
        </FormControl>
      </Dialog>        
    </div>
  );
}

export default App

1 Ответ

1 голос
/ 05 июля 2019

setSmth функция работает асинхронно.Он запускает повторное рендеринг, а затем useState возвращает новое значение.

Если вам нужно немедленное значение, просто используйте значение, которое вы установили в состояние: 

const newFileUrl = URL.createObjectURL(event.target.files[0]);
setFileUrl(newFileUrl);
console.log("fileUrl");
console.log(newFileUrl);
...