Question

我可以访问name，type和genres属性，但是image.medium属性返回“ null不是对象”。我认为我的错误与没有由json对象合成的image属性有关，该对象具有两个属性，我是react-native的初学者，不知道如何解决。

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>
    );
}

}

Lastly, this link could be helpful for you to have a better understanding.

希望这会有所帮助...

我无法在react-native

1 个答案: