Tidak dapat memilih fail yang dimuat naik untuk penandaan dalam React

Question

Saya menggunakan React untuk membuat muat naik fail. Saya mahu pembolehubah status ditetapkan kepada fail yang dimuat naik (.docx atau .pdf) sebaik sahaja fail dimuat naik. Tetapi apabila memanggil keadaan set, ia muncul sebagai tidak ditentukan.

const [selectedFile, setSelectedFile] = useState(null)

<Input type="file" onChange={handleImageUpload} accept={config.type}/>

const handleImageUpload = (event: { target: { files: any[] } }) =>
    fail const = event.target.files[0]
    jika (fail) {
        if (file.size > config?.fileSize) {
            setErrorMessage(config.fileSizeError)
        } else if (file?.name.endsWith(config.type)) {
            setSelectedFile(fail)
        } lain {
            reader.readAsDataURL(fail)
        }
    }
}

Setelah setSelectedFile(fail) ia menunjukkan selectedFile Adakah ini sebab khusus mengapa ia berlaku?

Answer 1

Ini kerana apabila anda memanggil atau log masuk ke konsol, status anda masih belum dikemas kini. Anda boleh merakam status anda dalam useEffectcangkuk untuk melihatnya apabila dikemas kini. Berikut adalah contoh:

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

Answer 2

Saya rasa kod anda berfungsi seperti yang diharapkan, tetapi apabila anda cuba memanggilnya, keadaan belum dikemas kini lagi.

Menurut React dokumentasi rasmi:

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

Sekarang, ini adalah tekaan saya, tetapi anda boleh cuba menambah kod ini:

setSelectedFile(file)

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