J'obtiens TypeError: Undefined n'est pas un objet (en évaluant 'subitem.media_details.sizes.medium.source_url') lorsque j'essaye d'extraire l'image source_URL de mon API wordpress.
https://imgur.com/a/WJoKKwh
Les messages d'erreur dans le les images jointes ci-dessus pointent vers les lignes de code suivantes
{this.state.data && this.state.data.length> 0 && (
this.state.data.map (post => (
{post.featured_media> 0 && post._embedded ['wp: featuresmedia']. filter (element => élément .id == post.featured_media) .map ((sous-élément, index) => (
source = {{uri: subitem.media_details.sizes.medium.source_url}}
J'ai parcouru les données JSON de mon API wordpress et il y a définitivement une URL.
class HomeScreen extends React.Component { constructor(){ super(); this.state = { data: null, loaded: true, error: null } } baseURL = 'https://wordpress-URL'; getData = (ev)=>{ this.setState({loaded:false, error: null}); let url = this.baseURL + '/posts?_embed'; let req = new Request(url, { method: 'GET' }); fetch(req) .then(response=>response.json()) .then(this.showData) .catch(this.badStuff) } showData = (data)=>{ this.setState({loaded:true, data}); console.log(data); } badStuff = (err) => { this.setState({loaded: true, error: err.message}); } componentDidMount(){ this.getData(); } render() { return ( <ScrollView> { this.state.error && ( <Text style={styles.err}>{this.state.error}</Text> )} {this.state.data && this.state.data.length > 0 && ( this.state.data.map(post => ( <View key={post.id} > <TouchableOpacity onPress={() => this.props.navigation.navigate('Details', { article: post.content.rendered, title: post.title.rendered} )} > <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', paddingTop: 25 }} borderBottomWidth={0.8} borderBottomColor={'gold'} > <View> {post.featured_media > 0 && post._embedded['wp:featuredmedia'].filter(element => element.id == post.featured_media).map((subitem, index) => ( <Image source={{ uri: subitem.media_details.sizes.medium.source_url }} style={{ width: width / 3, height: height / 5, borderRadius: 10 }} key={index} /> )) } {/* <Image source={require('../assets/Hotelcalifornia.jpg')} style={{ width: 150, height: 150, borderRadius: 10 }} /> */} </View> <View style={{ height: 170 }} > <Text style={{ width: width / 2, height: height / 5 }} fontSize={30} > {post.title.rendered} </Text> </View> </View> </TouchableOpacity> </View> )))} </ScrollView> ); } }
J'attends des images de l'URL à afficher dans le balises à l'intérieur de la vue, mais à la place j'obtiens l'erreur TypeError: undefined n'est pas un objet
3 Réponses :
Déboguez et vérifiez chaque élément de ce tableau filtré que vous essayez de mapper pour voir si tous les objets imbriqués existent pour chacun des éléments. Il y a probablement un objet imbriqué dans la chaîne subitem.media_details.sizes.medium.source_url qui n'existe pas pour au moins un des éléments.
Vous avez raison. De nouveaux messages ont été téléchargés et certains n'avaient pas d'image en vedette. À votre santé
Vous pouvez l'empêcher en faisant source = {{uri: subitem.media_details.sizes.medium.source_url || ''}}
Vérifiez si vous avez peut-être des références récursives dans votre schéma de données JSON! Le même type d'erreur pose des problèmes lors de l'utilisation de l'éditeur swagger pour définir les API REST OpenAPI (JSON / YAML) avec l'éditeur swagger. Les références récursives sont signalées dans l'éditeur swagger comme "undefined n'est pas un objet (évaluation de 'm [b]')" . Il m'a fallu plusieurs heures pour trouver la raison de ce comportement. Voir également le problème sur: https://github.com/swagger-api/swagger-ui/issues/ 3325 J'espère que cela t'aides. Bonne chance!