如何修复“TypeError: undefined is not an object (evaluating 'subitem.media_details.sizes.medium.source_url')”

Question

当我尝试从我的 wordpress API 中提取图像 source_URL 时，出现 TypeError: Undefined is not an object (evaluating ‘subitem.media_details.sizes.medium.source_url’) 。

https://imgur.com/a/1KZdNVc

https://imgur.com/a/WJoKKwh

上面所附图片中的错误消息指向以下代码行

{this.state.data && this.state.data.length > 0 && ( this.state.data.map(post => (

{post.featured_media > 0 && post._embedded['wp:featuredmedia'].filter(element => element.id == post.featured_media).map((subitem, index) => (

source={{ uri: subitem.media_details.sizes.medium.source_url }}

我已经从我的 wordpress API 中查看了 JSON 数据，并且肯定有一个 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>
);
}
}

我希望 URL 中的图像显示在视图内的标签中，但我得到的是 TypeError: undefined is not an object

原文由 Umar745 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

调试并检查您尝试映射的已过滤数组中的每个元素，以查看每个元素是否存在所有嵌套对象。 subitem.media_details.sizes.medium.source_url 链下可能有一个嵌套对象，至少其中一个元素不存在。

原文由 Eric Svitok 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

检查您的 JSON 数据方案中是否可能有任何 递归引用！使用 swagger 编辑器使用 swagger 编辑器定义 OpenAPI REST API (JSON/YAML) 时，同样的错误会产生问题。递归引用在 swagger 编辑器中报告为 “undefined is not an object (evaluating ’m[b]’)” 。我花了好几个小时才找到这种行为的原因。另请参阅问题：https: //github.com/swagger-api/swagger-ui/issues/3325 希望这有帮助。祝你好运！

原文由 inet-cologne 发布，翻译遵循 CC BY-SA 4.0 许可协议