javascript - 如何在本机反应中访问api调用响应中的特定数据

Question

我正在使用 react native 并使用 moviesDB API。由于某种原因，我无法访问我在 api 调用响应中寻找的数据。我正在尝试从 api 调用中获取“poster_path”信息。因此，在我的 console.log 中，如果调用 this.state.movi​​es，我会在那里看到许多电影的数据以及我想要访问的“poster_path”键及其信息。但是，当我 console.log this.state.movi​​es.poster_path 时，它显示未定义。只是想知道它为什么这样做。我曾尝试在线搜索答案，并尝试将括号括起来并取出扩展运算符。请参阅下面的控制台代码和图片。谢谢！

import { View, Text, StyleSheet, TextInput, Image } from "react-native";
import { FlatList, TouchableOpacity } from "react-native-gesture-handler";
import MovieItem from "../components/MovieItem";

const API_KEY2="*******";

class SearchScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            movies: \[\],
            searchTerm: "",
        }
    }

    handleSubmit =(e)=> {

        fetch(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${this.state.searchTerm}`)
            .then(data => data.json())
            .then(data=> {
                this.setState({
                    movies: \[...data.results\]
                });
                console.log("RESPONSE FROM THIS.STATE.MOVIES", this.state.movies)
                console.log("RESPONSE FROM THIS.STATE.MOVIES.POSTER_PATH",this.state.movies.poster_path)

            }) 

    }

    handleChange=(textToSearch)=> {
        this.setState({
            searchTerm: textToSearch
        });
    }

    render() {


        return(
            <View style={styles.screen}>
                <TextInput 
                    style={styles.input}
                    onSubmitEditing={this.handleSubmit} 
                    onChangeText={(text)=>this.handleChange(text)} 
                    placeholder="Enter Movie" 
                    />
                    <FlatList 
                        data={this.state.movies} 
                        renderItem={({item})=> {
                            return(
                                <TouchableOpacity onPress={()=> this.props.navigation.navigate("MovieItem", {item})}>
                                    <View style={styles.movieItem}>
                                    <Image source={{uri:`https://image.tmdb.org/t/p/w1280/${item.poster_path}`}} 
                                        style={{
                                            height: 220, 
                                            width: 200
                                        }}/>
                                            <MovieItem item={item}/>
                                    </View>
                                </TouchableOpacity>
                                )
                    }} />
            </View>
        )
    }
}


const styles = StyleSheet.create({
    screen: {
        flex: 1,
        backgroundColor:"tomato",
        justifyContent:"center",
        alignItems:"center",
        flexDirection:"column"
    },
    input: {
        borderStyle:"solid", 
        borderWidth: 5, 
        width:"100%", 
        padding: 20,
        backgroundColor:"white",
        fontFamily:"Yesteryear-Regular",
        fontSize: 20,
        color:"tomato"
    },
    movieItem: {
        marginTop: 20,
        marginBottom: 20
    },

})


export default SearchScreen;][1]][1]

// this.state.movi​​es 的响应 // this.state.movi​​es.poster_path 的响应

标签： javascriptreactjsdatabaseapireact-native

Answer 1

var temp = [{'poster_path' :'xxx'}];

temp[0].poster_path;