检索 JSON 数据但路径正确时，我得到“Null 不是对象”

Question

我正在尝试在我的应用中检索 JSON 数据。使用时返回数据成功：

<Text style={styles.font}> {item.show.name}</Text>

但我现在正尝试返回图像。 JSON中图片的正确路径是：

item.show.image.original

但我收到一条错误消息：

“Null is not a object (evaluating item.show.image.original)

我尝试过更改路径名、添加索引、将路径放入字符串中，但没有任何改变。代码如下：

<View>
      {data ? (<View style={styles.resultsContainer}>
    <FlatList
      numColumns= '3'
      data={data}
      renderItem={({item}) => (
        <TouchableOpacity style = {styles.show}onPress={() => navigation.navigate('Shows')}>    
        <View style={styles.text}>
          <Text style={styles.font}> {item.show.name}</Text>
         </View>
          <Image 
          style={styles.resultImage} source={{uri: item.show.image.original }} />

      </TouchableOpacity>
      )}
      
      />
    </View>

这里是 JSON

[
  {
    "score": 17.915743,
    "show": {
      "id": 5631,
      "url": "https://www.tvmaze.com/shows/5631/car-sos",
      "name": "Car S.O.S",
      "type": "Documentary",
      "language": "English",
      "genres": [],
      "status": "To Be Determined",
      "runtime": 60,
      "premiered": "2013-02-07",
      "officialSite": "http://natgeotv.com/uk/car-sos",
      "schedule": {
        "time": "20:00",
        "days": [
          "Thursday"
        ]
      },
      "rating": {
        "average": 7.9
      },
      "weight": 95,
      "network": {
        "id": 242,
        "name": "National Geographic Channel",
        "country": {
          "name": "United Kingdom",
          "code": "GB",
          "timezone": "Europe/London"
        }
      },
      "webChannel": null,
      "externals": {
        "tvrage": 35146,
        "thetvdb": 266851,
        "imdb": null
      },
      "image": {
        "medium": "https://static.tvmaze.com/uploads/images/medium_portrait/100/250748.jpg",
        "original": "https://static.tvmaze.com/uploads/images/original_untouched/100/250748.jpg"
      }

为什么我的图像没有返回？我很困惑，因为文本完美返回，但图像却没有。

Answer 1

我得到了你的预期结果，我不知道你在应用什么图片风格请申请图片的width 和height 希望你能得到你的图片

这是我完整的小代码，仅用于测试目的

import React, { Component } from 'react' import {FlatList,Text,Image} from 'react-native' class Test extends Component{ constructor(props){ super(props)this.state={
        data:[
            {
              "score": 17.915743,
              "show": {
                "id": 5631,
                "url": "https://www.tvmaze.com/shows/5631/car-sos",
                "name": "Car S.O.S",
                "type": "Documentary",
                "language": "English",
                "genres": [],
                "status": "To Be Determined",
                "runtime": 60,
                "premiered": "2013-02-07",
                "officialSite": "http://natgeotv.com/uk/car-sos",
                "schedule": {
                  "time": "20:00",
                  "days": [
                    "Thursday"
                  ]
                },
                "rating": {
                  "average": 7.9
                },
                "weight": 95,
                "network": {
                  "id": 242,
                  "name": "National Geographic Channel",
                  "country": {
                    "name": "United Kingdom",
                    "code": "GB",
                    "timezone": "Europe/London"
                  }
                },
                "webChannel": null,
                "externals": {
                  "tvrage": 35146,
                  "thetvdb": 266851,
                  "imdb": null
                },
                "image": {
                  "medium": "https://static.tvmaze.com/uploads/images/medium_portrait/100/250748.jpg",
                  "original": "https://static.tvmaze.com/uploads/images/original_untouched/100/250748.jpg"
                }
          }
          }
          ]
    }
}
renderItem=({item})=>(
    <>
    <Text>{item.show.image.original}</Text>
    <Image source={{uri:item.show.image.original}} style={{width:200,height:200}} />
    </>

)
render(){
    return(
        <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        />
    )
}}export default Test

希望对你有帮助

Answer 2

但您提供的 JSON 中的“显示”对象中似乎没有图像键。看起来您面对的是 item.image.original 或 item.image.medium 下的图像路径。