React Native 错误:无法读取电影搜索应用程序的未定义属性“map”

jljoyd4f  于 2023-01-27  发布在  React
关注(0)|答案(1)|浏览(100)

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

`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;`
w6lpcovy

w6lpcovy1#

你正在调用movies.Search.map,但是movies是一个数组。你正在尝试从电影中访问Search,而电影是一个数组。由于数组原型没有Search属性,因此它是undefined。因此,你需要做的是类似于下面的事情:

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

相关问题