错误：无法读取电影搜索应用程序未定义的属性“地图”答案

【问题标题】：Error : Cannot read property 'map' of undefined for Movie Search App错误：无法读取电影搜索应用程序未定义的属性“地图”
【发布时间】：2023-01-25 18:22:00
【问题描述】：

我一直在按照指南为 React Native 创建电影搜索应用程序，当我对标题搜索进行硬编码时，搜索功能正在运行，因为它显示在 console.log 中，但是显示电影的地图功能一直显示为未定义的错误。这是地图功能的页面，但如果需要，我可以显示其他页面的代码。

`import React, { useEffect, useState } from 'react';
import {StyleSheet,View,Button,ScrollView} from 'react-native';
import {TextInput} from 'react-native-paper'; 

import { fetchMovies } from '../API/Index';
import {MovieCard} from './MovieCard';

function SearchScreen({navigation}) {
  const [movies, setMovies] = useState([]);
  console.log(movies);
  const [searchMovie, setSearchMovie] = useState('Harry Potter');

  useEffect(()=>{
    const getMovies = async() =>setMovies(await fetchMovies(searchMovie))
    getMovies();
  },[])

  const Search = async () => {
    setMovies(await fetchMovies(searchMovie));
    setSearchMovie('');
  };
  
  return (
    <View style={styles.Container}>
      {Object.keys(movies).length > 0 &&(
      <View style={styles.Header}>
        <TextInput style={styles.SearchBar} placeholder='Search...' 
          value={searchMovie} onChangeText={(text)=>setSearchMovie(text)}
          left = {<TextInput.Icon name='magnify'/>} onPress={Search}
          onSubmitEditing={Search}/>
        <Button
        title="Search"
        onPress={() => navigation.navigate('Info')}
      />
      </View>
      )}
      <ScrollView contentContainerStyle={{
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        alignItems: 'center'
      }}>
        {/* {
          movies.Search.map((movie,i)=>(
            <MovieCard movie={movie} key={i}/>
          ))
        } */}
      </ScrollView>
  </View>
  );
}

const styles = StyleSheet.create({
  Container:{
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  Header:{
    flexDirection: 'row',
    backgroundColor:'#000000',
    alignItems: "center",
    justifyContent: 'center',
    width:'100%'
  },
  SearchBar:{
    borderColor: "#FFFFFF",
    backgroundColor: "#DDDDDD",
    marginHorizontal: 5
  },
  // MovieList:{
  //   flex: 10,
  //   flexDirection: 'row',
  //   flexWrap: 'wrap',
  //   justifyContent: 'space-around',
  //   alignItems: 'center'
  // }
});

export default SearchScreen;`

【问题讨论】：

标签： react-native

【解决方案1】：

您正在调用 movies.Search.map，但是 movies 是一个数组。您正在尝试从作为数组的电影访问 Search，因此它是 undefined，因为数组原型没有 Search 属性。所以你需要做的是做类似的事情：

movies.map((movie,index)=>{
     ...
})

【讨论】：