我对 React Native 非常陌生,并且在学习遇到此问题的类(class)时:
此组件显示“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 应用程序查看结果。
另一个不方便的地方是我没有从 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
关于reactjs - React - 来自 API 的值不会出现在 View 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52354210/