我一直在按照指南为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;`
1条答案
按热度按时间w6lpcovy1#
你正在调用
movies.Search.map
,但是movies
是一个数组。你正在尝试从电影中访问Search
,而电影是一个数组。由于数组原型没有Search属性,因此它是undefined
。因此,你需要做的是类似于下面的事情: