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

Question

I am using react native and working with the moviesDB API.For some reason, I cannot access the data I am looking for in the response of the api call. I am trying to get the "poster_path" info from the api call. So in my console.log, If call this.state.movies, I see the data of many movies there as well as the "poster_path" key that I want to access and its info. However, when I console.log this.state.movies.poster_path, it shows undefined. Just wondering why its doing that. I have tried searching online for answers and also tried to wrap brackets and take out the spread operator. Please see below for code and picture of console. Thanks!

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]

// response for this.state.movies // response for this.state.movies.poster_path

Answer 1

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

temp[0].poster_path;