dans le Je suppose qu'il y a quelque chose qui ne va pas pour appeler la fonction useEffect () Crochet, j'essaie essentiellement d'ajouter un 'id' à chaque "élément" objet mappé sur < CODE> TEMPDATA , en incrémentant l'état lastIndex dans chaque itération. Cependant, tous les item_id S ont été mappés renvoyés 0 (la valeur d'état initiale). setlastinDext dans les itérations? Merci.
3 Réponses :
Vous pouvez essayer ceci:
P> setlastIndex code> est une fonction async la valeur de lastIndex code> ne sera mise à jour que dans le prochain rendu, mais résultat.map code> est la fonction de synchronisation ==> LastIndreex toujours 0 en résultat.map code>
const SearchAppointments = React.memo(() => {
const [data, setData] = useState([ ])
// You not really need this lastIndex state for setting id for your data item, but somehow you want it after setData you can keep this and set to the last index of the item in fetched data
const [lastIndex, setLastIndex] = useState(0)
useEffect( () => {
const fetchData = async() => {
var response = await fetch('../data.json');
var result = await response.json()
var tempData = result.map( (item, index) => ({...item, id: index}))
setLastIndex(tempData.length -1)
setData(tempData)
};
fetchData();
}, [])
return (
<div>
</div>
);
})
Setter d'état étant ASYNC est un problème de composant de classe, voici un Fermeture sale Non Peu importe combien de temps a passé cela ne changera jamais à la valeur actuelle. L'effet a toujours une dépendance manquante et LASINDEX ne sera jamais autre que 0 aussi peut aussi bien le mettre à 0.
Si vous LASTINDEX comme une dépendance, cela provoquera un re-rendu infini car nous avons setlastIndex à l'intérieur de ce useEffect . Il utilise SETLASTINDEX (STILDIDEX => LastIndex + 1); (Définir le nouvel état basé sur l'état précédent) ne provoquera pas la fermeture de code . Vous pouvez obtenir plus d'informations ici: réactjs.org/docs/...
LastIndex est disponible pour FETCHDATA grâce à la fermeture, mais lorsque le composant repère, il ne sera pas exécuté l'effet que FetchData a une fermeture fade de SletinDex. Cela signifie que votre solution est inutile d'utiliser Enleverex car il ne sera jamais 0 . Vous pouvez aussi bien faire résultat.map ((élément, index) => ({... item, id: index}) . Le code inutile dans les questions ne peut que conduire à des réponses inutiles.
D'accord, le STILDIDEX peut être remplacé par index de chaque élément. Fermeture obsolète de SletinDex: Vérifiez ma réponse précédente.
Vous allez essayer ceci:
const SearchAppointments = React.memo(() => {
const [data, setData] = useState([]);
const fetchData = async() => {
const response = await fetch('../data.json');
const result = await response.json();
setData(result.map( (item, index) => ({...item, id:index})))
};
useEffect( () => {
fetchData();
}, [])
return (
<div>
</div>
);
})```
Ici, vous mappiez le item2.Id à DATA . Cependant, ce que je voulais réellement mapper pour Data est l'ensemble de l'élément (avec l'élément.Id)
Je pense que vous vouliez dire résultat.map ((élément, index) => ({... item, id: index})
@Hmr oui, mon erreur)
Avez-vous vraiment besoin Il y a lastIndex ?
data.length .
Il peut être utilisé à l'intérieur setingdata (lastdata => ...)
Pourquoi ne pas faire
résultat.map ((élément, index) => ({... item, ID: index}) ? Vous pouvez définir LastIndex sur les résultats.Length. L'effet ne sera exécuté qu'une fois. Je ne sais pas pourquoi vous avez même besoin de LasIndex.