Question

我正在尝试创建一个FlatList，其中包含一个数组，该数组包含具有数组的对象，而我无法使其正常工作。

我的错误消息：

“不变违反：对象作为React子元素无效（发现：键为{DATA，MESSAGE，STATUS}的对象。如果您打算渲染一个孩子的集合使用数组代替 ”

我可以让它与[1,2,3,4]之类的普通列表一起使用

这是我的代码：

import React, { Component } from 'react';
import {StyleSheet, View, Text, StatusBar, TouchableOpacity, FlatList, ActivityIndicator } from 'react-native';
class FilterScreen extends Component {
state = {
  data: [{"DATA":[{"filter_id":"44","filter_name":"filter 1"},{"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter 4"},{"filter_id":"48","filter_name":"filter 5"}],"MESSAGE":"DATA FOUND","STATUS":200}],
}
renderRow = ({item}) => {
 return (
    <View style={styles.item}>
      <Text>{item.DATA.filter_name}</Text> // my error points to this line
    </View>
    )
 }
 render() { 
  return (
   <View style={styles.MainContainer}>
     <FlatList 
       data={this.state.data}
       renderItem={this.renderRow} 
       keyExtractor={(item, index) => index.toString()}
      />
   </View>
  );
 }
}
const styles = StyleSheet.create({
 MainContainer: {
  marginTop:50,
 },

});
export default FilterScreen;

我希望我的FlatList像这样打印出filter_name

过滤器1
过滤器2
过滤器3
过滤器4
过滤器5

Answer 1

您需要注意数据的结构。您的this.state.data是一个数组。在数组内部，您有两个对象。 DATA和MESSAGE对象。因此，如果要将DATA对象传递给renderItem，则必须传递this.state.data[0].DATA，如下所示：

 <View style={styles.container}>
       <FlatList 
       data={this.state.data[0].DATA}
       renderItem={this.renderRow} 
       keyExtractor={(item, index) => index.toString()}
      />
 </View>

然后，您需要将renderItem函数调整为：

 //remove the comment inside return, otherwise you will get again an error 
 renderRow = ({item}) => {
 return (
    <View style={styles.item}>
      <Text>{item.filter_name}</Text>
    </View>
    )

工作示例： https://snack.expo.io/BkmD4V12V

React Native如何传递带有包含要与FlatList一起使用的列表的对象的列表？

1 个答案: