迭代 json 时 FlatList 不工作

Question

目前我正在尝试显示由 API 提供并随 fetch 一起提供的数据。但是在使用 FlatList 部署时出现错误 "undefined is not an object (evaluating item.title)"。我已经使用了 JSON.stringify () 和 json.parse，我也已经停止使用这两者并且什么都不用，无论以何种方式工作。请帮忙。当前代码是这样的：

const { height, width } = Dimensions.get('window');
var autorization = 'Basic asdfasdfasdf';
let url = 'https://www.pagetest/api/search';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            words: 'anyword',
            Loader: [],
            loadFlatList: false
        }
    }
    handlePress = async () => {
        fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json; charset=utf-8',
                'Authorization': autorization
            },
            body: JSON.stringify({
                keyword: this.state.words,
            })
        })
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    Loader: responseJson.movies,
                })
            })
            .catch((error) => {
                alert(error);
            })
            .done();
}
/**  Function that collects the text of onChangeText and makes changes in the states, 
also calls the function that contains the 'fetch' **/

handleSearch = (text) => {
    this.setState({ words: text, isLoading: false, loadFlatList: true });
/** Function that initiates the 'fet... */

    this.handlePress();
}

render() {
    return (

         /** Head icons a input search **/

        <View style={{ backgroundColor: '#181818', height: height }}>
            <View style={styles.containerHead}>
                <Image
                    source={BACK_ICON}
                    style={{ width: 40, height: 40, paddingRight: 3,               
                     paddingTop: 5 }} />

                <View style={styles.containerFrom}>
                    <Image
                        source={SEARCH_ICON}
                        style={{ width: height * .02, height: height 
                        * .02, opacity: .2 }} />
                    <TextInput style={styles.txtInput} placeholder= 
                         {'Searching'}
                        onChangeText={(text) => 
                        this.handleSearch(text)}
                    ></TextInput>
                </View>
            </View>

            {this.state.isLoading &&
                <View style={styles.bodyText}>
                    <Text style={styles.titleText}>
                        Find movies, series, directors, actors and...
                    </Text>
                </View>}

                /** Here the FlatList starts...  */

            <View style={styles.bodyText}>
                <ScrollView>
                    {this.state.Loader.length > 0 && <FlatList
                        data={this.state.Loader}
                        keyExtractor={(item) => item}
                        extraData={this.state}
                        renderItem={({ item }) => <View style={styles.bodyText}>
                            <Text style={styles.titleText}>{item.title}, {item.description}</Text>
                        </View>}
                    />}
                </ScrollView>
            </View>
        </View>
    );
}
}

const styles = StyleSheet.create({

titleText: {
    fontSize: 25,
    color: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center',

},
containerHead: {
    flexDirection: 'row',
    backgroundColor: '#000000',
    justifyContent: 'space-between',
    height: height * .05
},
containerFrom: {
    flexDirection: 'row',
    backgroundColor: '#000000',
    justifyContent: 'flex-end'
},
bodyText: {

    justifyContent: 'center'
},
});

我已经确保当 FlatList 开始工作时，获取的数据在状态下可用，为此我使用 '{this.state.Loader>0 && ...}' 但它没有工作，也没有它与地图一起使用了吗？我从 API 得到的 json 是这样的：

{
    "keyword": " santo",
    "movies": [
        {
            "id": "116",
            "title": "El Milagro De Todos Los Santos",
            "description": "Cuando un grupo de refugiados birmanos se une a la congregación, el pastor de una iglesia anglicana que fracasa intenta ayudarlos plantando cosechas y buscando la ayuda de la comunidad.",
            "url": "https://www.pagetest.com/assets/video/705ae4c7b5e92a52cb9763ecb50b06d1.mp4",
            "url_en": "",
            "clasification": {
                "title": "A",
                "description": "Mayores de 6 años."
            },
            "year": "2017",
            "poster": "https://www.pagetest.com/assets/global/movie_poster/116.jpg",
            "thumbnail": "https://www.pagetest.com/assets/global/movie_thumb/116.jpg"
        },
        null
    ],
    "series": []
}

知道为什么 FlatList 和 map() 都不能在这里工作吗？

Answer 1

是因为您在列表中的第二个项目是 null。你的电影数组有 2 个元素，第二个是 null。从您的数组中删除 null 并且应该可以工作。

renderItem={({ item }) => {
  if(item !== null) {
   return  <View style={styles.bodyText}>
              <Text style={styles.titleText}>{item.title}, 
              {item.description}</Text>
           </View>
      }
 }

或者更好的做法是在使用前清除数组

let filteredArray = arr.map((item) => {
    if(item !== null) {
         return item;
    } else {
         return false;
    }
}).filter(Boolean);

我更喜欢第二种解决方案。

迭代 json 时 FlatList 不工作

FlatList is not working when iterating json

api

json

fetch

react-native

react-native-flatlist