我無法在react-native中訪問json對象的屬性

Question

我可以訪問名稱，類型和流派屬性，但是image.medium屬性返回“ null不是對象”。我相信我的錯誤與沒有由json對象合成的image屬性有關，具有兩個屬性，我是初學者在本機反應中，我不知道如何解決。

export default class ListaItens extends Component {

  constructor(props) {
    super(props)
    this.state = {
      listaItens: []
    }
  }

  componentWillMount() {
    axios.get('http://api.tvmaze.com/search/shows?q=Vikings')
      .then((response) => {
        // handle success
        this.setState({ listaItens: response.data })
        //console.log(response);
      })
      .catch(() => {
        // handle error
        console.log("Erro ao recuperar dados");
      })
  }


  render() {
    return (
      <View>
        {this.state.listaItens.map(item => {
          return (
            <Itens key={item.show.id} item={item}> </Itens>
          );
        })}
      </View>
    )
  }
}

class Itens extends Component {
    render() {
        return (
            <View>
                <Text>{this.props.item.show.image.medium }</Text>
                <Text>{this.props.item.show.name} </Text>
                <Text>{this.props.item.show.type} </Text>
                <Text>{this.props.item.show.genres} </Text>
            </View>
        );
    }
}

Answer 1

我不太了解這里的結構，但如下所示到達了this.props.item.show.image.medium

import React from 'react';
import { Text, View } from 'react-native';

export default class Example extends React.Component {
  state = {
    listaItens:
[
{
  show:{
         'id':29,
         'url':"http://www.tvmaze.com/shows/29/vikings",
         'name':'Vikings',
         'type': "Scripted",
         'language':'English',
         'genres':[  ],
         'status':'Running',
         'runtime':60,
         'premiered':'2013-03-03',
         'officialSite':'http://www.history.com/shows/vikings',
         'schedule':{  },
         'rating':{  },
         'weight':98,
         'network':{  },
         'webChannel':null,
         'externals':{  },
         'image':{
            'medium':'http://static.tvmaze.com/uploads/images/medium_portrait/172/431187.jpg',
            'original':'http://static.tvmaze.com/uploads/images/original_untouched/172/431187.jpg'
         },
       }
     }
   ],
};

  render() {
      return (
        <View>
  {this.state.listaItens.map(item => {
    return (
      <Itens key={item.show.id} item={item} />
    );
  })}
</View>
      );
  }
}

  class Itens extends React.Component {
render() {
    return (
        <View>
            <Text>{this.props.item.show.image.medium }</Text>
            <Text>{this.props.item.show.name} </Text>
            <Text>{this.props.item.show.type} </Text>
            <Text>{this.props.item.show.genres} </Text>
        </View>
    );
}
} 

另一方面，我假設您已經有單獨的組件並按以下方式使用它們，

// ListaItens組件

import React from 'react';
import { View } from 'react-native';
import Itens from './example';

export default class ListExample extends React.Component {
  state = {
    listaItens:
[
    {
  show:{
         'id':29,
         'url':"http://www.tvmaze.com/shows/29/vikings",
         'name':'Vikings',
         'type': "Scripted",
         'language':'English',
         'genres':[  ],
         'status':'Running',
         'runtime':60,
         'premiered':'2013-03-03',
         'officialSite':'http://www.history.com/shows/vikings',
         'schedule':{  },
         'rating':{  },
         'weight':98,
         'network':{  },
         'webChannel':null,
         'externals':{  },
         'image':{
            'medium':'http://static.tvmaze.com/uploads/images/medium_portrait/172/431187.jpg',
            'original':'http://static.tvmaze.com/uploads/images/original_untouched/172/431187.jpg'
         },
       }
     }
   ],
  };

  render() {
      return (
        <View>
  {this.state.listaItens.map(item => (
      <Itens key={item.show.id} item={item} />
    ))}
</View>
      );
  }
}

//強度成分

import React from 'react';
import { Text, View } from 'react-native';

export default class Itens extends React.Component {

render() {
    return (
        <View>
            <Text>{this.props.item.show.image.medium }</Text>
            <Text>{this.props.item.show.name} </Text>
            <Text>{this.props.item.show.type} </Text>
            <Text>{this.props.item.show.genres} </Text>
        </View>
    );
}

}

最后，此鏈接可能有助於您更好地理解。

希望這會有所幫助...