items.forEach不是函数反应原生

Question

我正在学习本机反应，我尝试使用react-native-grid-view进行基于网格的布局。我想每行显示3张图片。但是我收到错误声明'items.forEach不是函数'。可能是什么问题？

以下是我的代码

    const data = [
        {image:require('./assets/img/Alcohol1.png'),price:1},
        {image:require('./assets/img/Bakery1.png'), price:2},
        {image:require('./assets/img/Beverages1.png'), price:3},
        {image:require('./assets/img/Alcohol1.png'), price:4},
        {image:require('./assets/img/FoodCupboard.png'), price:5},
        {image:require('./assets/img/Health&Beauty.png'), price:6},
    ]
const ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 });
const CATEGORIES_PER_ROW = 3;

class Category extends Component{
    render(){
        console.log('props value',this.props.category);
        return(
                <View style={styles.category}>
                    <Image source={this.props.category.image} style={styles.thumbnail} />
                    <View>
                        <Text 
                            style={styles.price}
                            numberOfLines={3}>{this.props.category.price}</Text>
                    </View>
                </View>
            )
    }
}

class Main extends Component{
    constructor(props){
        super(props);
        this.state = {
            isRefreshing:false,
            dataSource: ds.cloneWithRows(),
        }
        this.renderItem = this.renderItem.bind(this);
    }

    componentDidMount() {
        console.log(data);
        this.setState({
            dataSource:ds.cloneWithRows(data),
            isRefreshing:true,
        });
    }

    render() {
        if (!this.state.isRefreshing) {
          return this.renderLoadingView();
        }

    return (
      <GridView
        items={this.state.dataSource}
        itemsPerRow={CATEGORIES_PER_ROW}
        renderItem={this.renderItem}
        style={styles.listView}
      />
    );
  }

      renderLoadingView() {
        return (
          <View>
            <Text>
              Loading Categories...
            </Text>
          </View>
        );
      }

      renderItem(item){
        console.log('item',item);
        return <Category category={item} />
      }
}



const styles = StyleSheet.create({
    container:{
        flex:1, // fill the entire screen
        alignItems:'stretch'
    },
    category: {
        height: 150,
        flex: 1,
        alignItems: 'center',
        flexDirection: 'column',
  },
  price: {
        fontSize: 10,
        marginBottom: 8,
        width: 90,
        textAlign: 'center',
  },
   thumbnail: {
        width: 53,
        height: 81,
  },
  listView: {
        paddingTop: 20,
        backgroundColor: '#F5FCFF',
  },
});