undefined在React Native中不是一个对象（评估'item.Title'）。

Posted 2021-04-29

所以我在做这个电影浏览器项目的时候，我必须从OMDB API(http:/www.omdbapi.com)并将数据显示在Flatlist组件中。

虽然我成功地显示了每部搜索到的电影的10个结果（因为API每次调用都会返回10个项目），但我添加了一个按钮，该按钮将运行一个函数，使用页面参数再次向API发送请求，获取10个以上的结果，并将结果连接到电影中。

但是，当我一按下按钮并运行函数时，就出现了这个错误 undefined is not an object (evaluating 'item.Title').

这是我为Home组件编写的代码=> 首页.js

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, FlatList, TouchableHighlight, Image, Button} from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
import { fetchMovies } from "../api/api";




export default class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            text: "",
            movies: null,
        };
    }
      //update search text
    componentDidUpdate(prevState) {
        if (this.state.text !== prevState.text) {
            this.getSearch(this.state.text);            
        }
    }
      //get search results from fetchMovies
    getSearch = async text => {
        const results = await fetchMovies(text)
        this.setState({ movies: results });
    };


    ////////////////////////////Function making API call using the page parameter///////////
    //loading more movies
    handleLoadMore = async() => {
        try {
            const page = Math.trunc(this.state.movies.length / 10) + 1;
            const res = await fetchMovies(this.state.text, page);
            this.setState(prevState => ({
                movies: prevState.movies.concat(res.movies)
            })) 
        }catch(err){
            console.log(err.message);
        }
    }
    //////////////////////////////////////////////////////////


      //movie title and poster to render in the flatlist
    movieCard = ({ item }) => {
        return (
        <TouchableHighlight
            style={styles.movieCard}
            underlayColor="white"
            onPress={() => {
            this.props.navigation.navigate("Details", {
                    title: item.title,
                    id: item.imdbID
                });
            }}
        >

            <View>
                <Image
                        style={styles.movieImage}
                        source={ {uri: item.Poster} }                 
                    />
                <View style={{alignItems: 'center'}}>
                    <Text style={styles.movieTitle}>{item.Title} ({item.Year})</Text>
                </View>
            </View>
        </TouchableHighlight>
        );
    };



render() {
    return(
        <View style={styles.container}>
            <TextInput 
                style={styles.searchBox}
                autoCorrect={false}
                autoCapitalize='none'
                autoFocus maxLength={45}
                placeholder='Search'
                onChangeText={(text) => this.setState({ text })}
                value={this.state.text}
            />

            {this.state.movies ?
            <FlatList
                style={styles.movieList}
                data={this.state.movies}
                renderItem={this.movieCard}
                keyExtractor={item => item.Title + item.imdbID}

            />
            :
            <Text
                style={{ 
                    alignSelf: 'center', 
                    paddingTop: 150, 
                    justifyContent: 'center', 
                    color: '#8a8787', 
                    fontStyle: 'italic' }}>
                search for a movie above...
            </Text>
            }

            <Button
                onPress={this.handleLoadMore}
                title="Load More"
                color="#841584"
            />
        </View>
    )
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#DDD',
        alignItems: 'center',
    },
    searchBox: {
        fontSize: 20,
        fontWeight: '300',
        padding: 10,
        width: '100%',
        backgroundColor: 'white',
        borderRadius: 10,
        marginBottom: 30
    },
    movieList: {
        flex: 1, 
        marginHorizontal: 30,
    },
    movieCard: {
        flex: 1,
        margin: 5,
        padding: 5,
    },
    movieImage: {
        width: '100%',
        height: 350,
        borderRadius: 10,
        alignSelf: 'center',
    },
    movieTitle: {
        marginTop: 10,
        fontSize: 20,
        color: '#333'
    }
});

这是api函数的代码 => api.js

const API_KEY = "API_KEY";


//fetch search data from omdb api
export const fetchMovies = async (response, page) => {
  const url = `http://www.omdbapi.com/?apikey=${API_KEY}&s=${response}`;
  try {
    let response = await fetch(url);
    if(page) {
      response = await fetch(url + `&page=${page}`)
    }
    const { Search } = await response.json();
    return Search;
  } catch (err) {
    return console.log(err);
  }
};

//fetch ID from omdb api
export const fetchById = async id => {
  const url = `http://www.omdbapi.com/?apikey=${API_KEY}&i=${id}`;
  try {
    const response = await fetch(url);
    const results = await response.json();
    return results;
  } catch (err) {
    return console.log(err);
  }
};

我知道这个问题的解决方法可能很简单，但是作为一个新的反应式的人，我无法弄清楚它。

答案

关于 FlatList在文档中，他们显然是通过lambda将渲染的项目返回给了 renderItem 榰

还有你的初始化 state.movies 是空的，我想应该是一个空数组。

 this.state = {
   text: "",
   movies: [],
 };

 <FlatList
  style={styles.movieList}
  data={this.state.movies}
  renderItem={({item}) => this.movieCard({item})}
  keyExtractor={item => item.Title + item.imdbID}