我对React Native很新,并且遵循我遇到这个问题的课程:
此组件显示“TEXT”但未显示{film.title}
_displayFilm() {
const { film } = this.state
if (film != undefined) {
return (
<ScrollView style={styles.scrollview_container}>
<Text>TEXT</Text>
<Text>{film.title}</Text>
</ScrollView>
)
}
}
我在Ubuntu中使用Atom并使用Expo Android App查看结果。
另一个不方便的是我没有从Atom终端的console.log()获取日志,这可能帮助我看到完整的json电影对象。值“标题是正确的(在我的应用程序的另一页中使用)。
如果有人知道如何解决它,非常感谢!
如果有用,这里是完整的文件内容:
// Components/FilmDetail.js
import React from 'react'
import { StyleSheet, View, Text, ActivityIndicator, ScrollView, Image } from 'react-native'
import { getFilmDetailFromApi, getImageFromApi } from '../API/TMDBApi'
import moment from 'moment'
import numeral from 'numeral'
class FilmDetail extends React.Component {
constructor(props) {
super(props)
this.state = {
film: undefined,
isLoading: true
}
}
componentDidMount() {
getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data => {
this.setState({
film: data,
isLoading: false
})
})
}
_displayLoading() {
if (this.state.isLoading) {
return (
<View style={styles.loading_container}>
<ActivityIndicator size='large' />
</View>
)
}
}
_displayFilm() {
const { film } = this.state
if (film != undefined) {
return (
<ScrollView style={styles.scrollview_container}>
<Text>TEXT</Text>
<Text>{film.title}</Text>
<Text style={styles.title_text}>{film.release_date}</Text>
<Text style={styles.title_text}>{film.backdrop_path}</Text>
</ScrollView>
)
}
}
render() {
return (
<View style={styles.main_container}>
{this._displayLoading()}
{this._displayFilm()}
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1
},
loading_container: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
},
scrollview_container: {
flex: 1
},
image: {
height: 169,
margin: 5
},
title_text: {
fontWeight: 'bold',
fontSize: 35,
flex: 1,
flexWrap: 'wrap',
marginLeft: 5,
marginRight: 5,
marginTop: 10,
marginBottom: 10,
color: '#000000',
textAlign: 'center'
},
description_text: {
fontStyle: 'italic',
color: '#666666',
margin: 5,
marginBottom: 15
},
default_text: {
marginLeft: 5,
marginRight: 5,
marginTop: 5,
}
})
export default FilmDetail
被调用的API在这里:
const API_TOKEN = "MY_API_TOKEN"
export function getFilmsFromApiWithSearchedText (text, page) {
const url = 'https://api.themoviedb.org/3/search/movie?api_key=' + API_TOKEN + '&language=fr&query=' + text + "&page=" + page
return fetch(url)
.then((response) => response.json())
.catch((error) => console.error(error))
}
export function getImageFromApi(name) {
return 'https://image.tmdb.org/t/p/w185' + name
}
export function getFilmDetailFromApi(id) {
const url = 'https://api.themoviedb.org/3/movie/' + id + 'api_key=' + API_TOKEN + '&language=fr'
return fetch(url)
.then((response) => response.json())
.catch((error) => console.log(error))
}
我想你在?
之前缺少一个api_key
:
const url = 'https://api.themoviedb.org/3/movie/' + id + '?api_key=' + API_TOKEN + '&language=fr'
你需要修复控制台,因为它必须显示控制台atm的响应是错误的... HTH
我相信你的apiFunction应该更像这样:
export function getFilmDetailFromApi(id) {
const url = 'https://api.themoviedb.org/3/movie/' + id + '?api_key=' + API_TOKEN + '&language=fr'
return fetch(url)
.then((response) => response.json())
.then((responseJson) => {
return responseJson;
})
.catch((error) => console.log(error))
}
在您的组件中尝试此操作:
this.state = {
film: {}, //change the undefined
isLoading: true
}
componentDidMount() {
this.getMovie();
}
getMovie() {
const movie = getFilmDetailFromApi(this.props.navigation.state.params.idFilm);
if (movie.hasOwnProperty('id')) { //that means a movie was returned
this.setState({ film: movie, isLoading: false });
}
}
_displayFilm中的文本正在显示,因为您已将电影设置为未定义。因此,只要状态不变,文本就会显示出来。更改_displayFilm:
_displayFilm() {
const { film } = this.state
if (film.hasOwnProperty('id')) {
return (
<ScrollView style={styles.scrollview_container}>
<Text>TEXT</Text>
<Text>{film.title}</Text>
<Text style={styles.title_text}>{film.release_date}</Text>
<Text style={styles.title_text}>{film.backdrop_path}</Text>
</ScrollView>
)
}
}
现在问题可能是你没有得到正确的数据。您的数据可能包含在response.data.data
或response.data
中,而不仅仅包含在response
中。所以console.log(response)
和检查