J'essayais de récupérer un tableau d'objets lorsque je rencontre ce problème. Désolé pour mon code désordonné, je suis un débutant.
export class App extends Component {
state ={
character:[]
}
componentDidMount(){
fetch('https://swapi.dev/api/people/').then(data => data.json()).then(res =>{
this.setState(() =>{
const ar = res.results
return {
character: ar
}
})
})
}
render() {
return (
<div>
test
{console.log(this.state.character[0])}
</div>
)
}
}
Ce code fonctionne bien pour moi au début jusqu'à ce que je change le journal de la console en {console.log (this.state. caractère [0] .name)} il dit "impossible de lire la propriété d'un non défini" même si la première ligne affiche parfaitement l'objet
3 Réponses :
Votre composant App récupère les données dans la méthode du cycle de vie componentDidMount qui s'exécutera après le premier montage. {console.log (this.state.character [0] .name)} affiche l'erreur "impossible de lire la propriété de undefined car lorsque le composant est monté pour la première fois, les données n'est pas encore disponible, ce qui signifie que this.state.character est toujours un tableau vide. Ainsi, lorsque vous essayez d'accéder à this.state.character [0] .name , c'est comme en disant donnez-moi la valeur de undefined.name qui vous donnera une erreur car la propriété name n'existe pas sur undefined . Pour résoudre ce problème, vous peut vérifier si character.length dans un conditionnel, puis essayer d'accéder à .name.
Example
render() {
return (
<div>
test
{this.state.character.length && <p>{this.state.character[0].name}</p>}
</div>
)
}
p >
vous êtes doué pour expliquer monsieur, je ne pouvais pas comprendre la plupart des réponses que j'obtiens du débordement de pile principalement parce que je suis un débutant et que mon anglais manque mais je vous comprends tout à fait, j'ai exécuté la console.log encore une fois, il a montré que les 2 premières lignes de réponse étaient indéfinies TYSM <3
Avez-vous toujours des problèmes? Quelle réponse a été indéfinie ?
Cela ne fonctionnera donc pas. Les données ne sont pas encore là. Il existe de nombreuses façons de contourner ce problème. Le plus simple est d'avoir une structure d'objet prédéfinie dans l'objet d'état, ce qui n'est pas très dynamique. Sinon, un simple .length + if + else fera l'affaire.
Fetch est asynchrone donc vous prendrez un certain temps pour obtenir le résultat, mais avant cela, votre jsx est déjà appelé. Il est donc bon d'utiliser jsx conditionnel. Veuillez vérifier l ' exemple complet comme ci-dessous où j'ai montré tout le nom du tableau de caractères sous l'élément li.
export class App extends React.Component {
state = {
character: []
};
componentDidMount() {
fetch('https://swapi.dev/api/people/').then(data => data.json()).then(res => {
this.setState(() => {
const ar = res.results;
return {
character: ar
}
})
})
}
render() {
return (
<div>
test
{
this.state.character && this.state.character.length && this.state.character.map((item, index) => {
return <li key={index}>{item.name}</li>
})
}
</div>
)
}
}
export default App;
donc je peux utiliser au moins 1 de la déclaration et tout ira bien, non? et comment fonctionne la fonction map signifie-t-elle vérifier si le (item, index) est égal à true?
salut, map est une sorte de boucle où item est chaque élément de la liste (par exemple list. map ()) et index est l'index de chaque élément de la liste.
Frère TYSM <3
Parce que
fetch ()est asynchrone . Le tableaucharacterest vide jusqu'à ce qu'il se termine et définisse le nouvel étatstate.characterest le tableau vide[]au début, avant que lecomponentDidMountdéfinisse l'état. Votre fonctionrender ()devra également gérer cet état initial.Est-ce que cela répond à votre question? Réagir: Comment attendre les données avant d'utiliser "this.state.x" dans une fonction?