0
私はreact-nativeを初めて利用していますが、私はどのように取り組むべきかわからない問題を抱えています。リアクションネイティブ - ダイナミックなonPressイベント
APIのデータに基づいて動的にレンダリングされるコンポーネントがあります。
for (var i = 0; i < data.length; i++)
{
categoryComponents.push(
<Card key={data[i].id}>
<CardItem>
<Body>
<TouchableHighlight onPress={(event) => {
const { navigate } = this.props.navigation;
navigate('Category', { category: data[i].id });
}}>
<Text>{data[i].name + " " + data[i].id}</Text>
</TouchableHighlight>
</Body>
</CardItem>
</Card>
);
}
ご覧のとおり、ダイナミックコンポーネントはアレイ内に保存されています。これは私が画面にレンダリング：
render() {
return (
<Container>
<Content style={styles.spacer}>{categoryComponents}</Content>
</Container>
)
}
問題は私のTouchableHighlightコンポーネント内で、onPressイベントはdata[i].id変数を受け入れていないようだということです。 undefinedというエラーが表示されます。しかし、私はonPressイベントの外でそれを使用し、それが定義されています。
私は自分のコードに変更して、私はこの問題を解決しようとしていた：あなたが見ることができるように、私は単に私がローカル変数に使用する値を格納し、それらの変数の代わりに、dataを参照
for (var i = 0; i < data.length; i++)
{
var name = data[i].name;
var id = data[i].id;
categoryComponents.push(
<Card key={id}>
<CardItem>
<Body>
<TouchableHighlight onPress={(event) => {
const { navigate } = this.props.navigation;
navigate('Category', { category: id });
}}>
<Text>{name + " " + id}</Text>
</TouchableHighlight>
</Body>
</CardItem>
</Card>
);
}
を。
これで問題は解決されませんでしたが、より多くの洞察が得られました。
私のTouchableHighlightコンポーネントonPressイベントは変数を受け入れますが、ループ割り当ての最後の繰り返しのみを使用します。
したがって、私のid変数は、TouchableHighlight内のすべてのコンポーネントで常に9に割り当てられます。 onPress外のイベントでも、id変数が変化しています。
この問題のため、私のリンクはどれも動的です。 TouchableHighlightコンポーネントの動的なonPressイベントをどのようにすることができますか？
編集：私はコンポーネントのためにnative-baseを使用します。
「FlatList」を使用してすべての面倒を保存してみませんか？ – Raymond