Impossible de sélectionner les fichiers téléchargés pour le balisage dans React

Question

J'utilise React pour créer un téléchargement de fichier. Je souhaite que la variable d'état soit définie sur le fichier téléchargé (.docx ou .pdf) dès que le fichier est téléchargé. Mais lors de l’appel de set state, il apparaît comme indéfini.

const [selectedFile, setSelectedFile] = useState(null)



const handleImageUpload = (événement : { cible : { fichiers : any[] } }) =>
    fichier const = event.target.files[0]
    si (fichier) {
        if (file.size > config?.fileSize) {
            setErrorMessage(config.fileSizeError)
        } else if (file?.name.endsWith(config.type)) {
            setSelectedFile(fichier)
        } autre {
            lecteur.readAsDataURL (fichier)
        }
    }
}
Une fois que setSelectedFile(file) apparaît, selectedFile Est-ce une raison spécifique pour laquelle cela s'est produit ? 

Answer 1

En effet, lorsque vous l'appelez ou le connectez à la console, votre statut n'a pas encore été mis à jour. Vous pouvez enregistrer votre statut dans un useEffecthook pour l'afficher une fois mis à jour. Voici un exemple :

useEffect(() => {
    console.log("文件 >> ", selectedFile);
  }, [selectedFile]);

Answer 2

Je pense que votre code fonctionne comme prévu, mais lorsque vous essayez de l'appeler, l'état n'a pas encore été mis à jour.

Selon la Documentation officielle de React :

set函数只会更新下一次渲染的状态变量。
如果在调用set函数之后读取状态变量，你仍然会得到在调用之前屏幕上的旧值。

Maintenant, c'est mon hypothèse, mais vous pouvez essayer d'ajouter ce code :

setSelectedFile(file)

setTimeout(() => {
    console.log(selectedFile); 
}, 5000);