Mengapa saya tidak boleh menetapkan semula tatasusunan menggunakan setState?
P粉714890053
2023-09-02 23:44:06
<p>Dalam komponen kamera saya, saya mahu memuat naik foto ke baldi setiap foto ke-3. Saya menggunakan keadaan dalam React untuk menyimpan gumpalan imej ke dalam tatasusunan. Semuanya berfungsi dengan baik untuk 3 foto pertama, tetapi selepas itu, saya tidak boleh menetapkan semula tatasusunan kepada kosong dan bilangan foto yang kelihatan rawak dimuat naik ke baldi saya. </p>
<pre class="brush:js;toolbar:false;"> biarkan [blobs, setBlobs] = useState([]);
const capturePhoto = tak segerak () =>
foto const = tunggu camera.current.takePhoto();
ambil(photo.path)
.then(res => {
setBlobs([...blobs, res._bodyBlob]);
console.log('gumpalan', gumpalan.panjang, gumpalan);
})
.catch(err => {
console.log('err', err);
});
checkLength();
};
const checkLength = tak segerak () =>
if (blobs.length >= 2) {
// muat naik fail ke folder dengan tarikh semasa dalam baldi awan firebase
const datestring = new Date().toLocaleString('de-DE');
blobs.forEach((blob, i) => {
uploadFile(blob, datestring + '/' + (i + 1) + '.jpg');
});
// set semula keadaan
setBlobs([]);
sendNotification('Foto dimuat naik');
toggleDialog();
}
};
</pra>
<p>Saya melog tatasusunan saya melalui konsol dan saiznya hanya meningkat. Selain itu, ia memulakan pengelogan konsol dari awal walaupun saya telah menambah elemen, mungkin kerana <code>setState()</code>
Saya cuba menunggu tetapan semula dengan membungkusnya dengan janji, tetapi malangnya ia tidak berjaya juga.
Sebaik sahaja terdapat 3 gumpalan, bagaimana saya boleh memuat naiknya ke awan dan menetapkan semula senarai selepas itu? </p>
Jadi ia sangat bergantung pada cara kod dilaksanakan, khususnya sifat tak segerak setState supaya anda boleh menggunakan bentuk panggilan balik setState . Berikut adalah contoh:
Berikut ialah contoh lengkap dengan selebihnya kod:
Nampak seperti tiga perkara:
checkLength
sebelum pengambilan selesai.setState
的新值。这是 React 的基本思想(是否是个好主意还有待商榷),状态值在渲染期间是不可变的。setState
sehingga pemaparan seterusnya, hanya keadaan tidak berubah seterusnya yang akan digunakan oleh pemaparan seterusnya.setState
依赖于先前的状态时,您应该将回调传递给setState
,而不是直接使用当前值。举个例子,假设你有一个空数组,你调用 fetch 一次,然后在第一个数组完成之前再次调用 fetch 。在执行...blob
时,这两个setState
调用都会引用空数组。通过传递回调,setState
Dapatkan nilai terkini yang dihantar sebagai parameter. Maklumat lanjut: https://react.dev/reference/react/Component#setstatePenyelesaian paling mudah ialah menghantar tatasusunan sebagai hujah kepada
setState
回调内的checkLength
di dalam panggilan baliksetState
.Ini ialah
.then()
yang dimaksudkan:Ini ialah
async
await
检查长度