0
数字を含む入れ子配列を表示しようとしています。配列には6つの要素（配列）があります。ネストされた各配列には、さらに6つの要素/数値が含まれています。私はSquareのコンポーネントに各番号を表示しようとしています。私はエラーがあります：this.props.inGrid.foreachは関数ではありません。以下はreact-native - this.porps.inGridは関数ではありません
import React, { Component, PropTypes } from 'react';
import { View, StyleSheet } from 'react-native';
import Square from './Square';
import * as globalStyles from '../styles/global';
export default class Grid extends Component {
render() {
const row = [];
this.props.inGrid.foreach((r, i) => {
row.push(
<Square key={i} sqValue={r[i]} />
);
});
return (
<View style={styles.grid}>
{row}
</View>
);
}
}
Grid.propTypes = {
numbers: PropTypes.object
};
const styles = StyleSheet.create({
grid: {
backgroundColor: globalStyles.BG_COLOR,
flexDirection: 'row',
padding: 20,
justifyContent: 'center'
}
});
スクエアコンポーネントです：
import React, { PropTypes } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as globalStyles from '../styles/global';
const Square = ({ sqValue }) => {
return (
<View style={styles.square}>
<Text>{sqValue}</Text>
</View>
);
};
Square.propTypes = {
sqValue: PropTypes.number
};
const styles = StyleSheet.create({
square: {
backgroundColor: globalStyles.BAR_COLOR,
width: 50,
height: 50,
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'red'
}
});
export default Square;
私が間違って何をしているのですか？
と呼ばれるinGrid'レンダリング機能があることを実際に一度配列でない 'のように、それが見えますランニング。グリッドコンポーネントが最初に作成された時点でデータが存在しない可能性があるかどうかを確認するために、1つのコンポーネントを上げます。たとえば、そのデータがAPIから来ていて、データが返される前にGridがレンダリングされているとします。 編集： ストライクすべてのこと...あなたは 'foreach'を呼び、関数は' forEach'と呼びます。 –