Pourquoi ne puis-je pas réinitialiser le tableau à l'aide de setState ?
P粉714890053
2023-09-02 23:44:06
<p>Dans le composant de mon appareil photo, je souhaite télécharger des photos dans un compartiment toutes les trois photos. J'utilise state dans React pour enregistrer une image blob dans un tableau. Tout fonctionne bien pour les 3 premières photos, mais après cela, je ne peux pas réinitialiser le tableau pour qu'il soit vide et un nombre apparemment aléatoire de photos est téléchargé dans mon compartiment. </p>
<pre class="brush:js;toolbar:false;"> let [blobs, setBlobs] = useState([]);
const capturePhoto = async () =>
const photo = attendre camera.current.takePhoto();
récupérer (photo.chemin)
.then(res => {
setBlobs([...blobs, res._bodyBlob]);
console.log('blobs', blobs.length, blobs);
})
.catch(erreur => {
console.log('erreur', erreur);
});
checkLength();
} ;
const checkLength = async () =>
if (blobs.length >= 2) {
// télécharge des fichiers dans un dossier avec la date actuelle dans un bucket cloud Firebase
const datestring = new Date().toLocaleString('de-DE');
blobs.forEach((blob, i) => {
uploadFile(blob, datestring + '/' + (i + 1) + '.jpg');
});
// réinitialiser l'état
setBlobs([]);
sendNotification('Photos téléchargées');
basculeDialog();
}
} ;
≪/pré>
<p>J'ai connecté ma baie via la console et la taille n'a fait qu'augmenter. En outre, il démarre la journalisation de la console à partir de zéro même si j'ai ajouté un élément, probablement parce que <code>setState()</code>
J'ai essayé d'attendre la réinitialisation en l'enveloppant dans une promesse, mais malheureusement cela n'a pas fonctionné non plus.
Une fois qu’il y a 3 blobs, comment puis-je les télécharger sur le cloud et réinitialiser la liste par la suite ? </p>
Cela dépend donc vraiment de la façon dont le code est exécuté, en particulier de la nature asynchrone de setState afin que vous puissiez utiliser le formulaire de rappel de setState . Voici un exemple :
Voici l'exemple complet avec le reste du code :
Cela ressemble à trois choses :
checkLength
avant que la récupération ne soit terminée.setState
的新值。这是 React 的基本思想(是否是个好主意还有待商榷),状态值在渲染期间是不可变的。setState
avant le prochain rendu, juste le prochain état immuable qui sera utilisé par le prochain rendu.setState
依赖于先前的状态时,您应该将回调传递给setState
,而不是直接使用当前值。举个例子,假设你有一个空数组,你调用 fetch 一次,然后在第一个数组完成之前再次调用 fetch 。在执行...blob
时,这两个setState
调用都会引用空数组。通过传递回调,setState
Obtenez la dernière valeur transmise en tant que paramètre. Plus d'informations : https://react.dev/reference/react/Component#setstateLa solution la plus simple est de passer le tableau comme argument à
setState
回调内的checkLength
dans le rappelsetState
.Voici le
.then()
en question :C'est
async
await
检查长度