map関数を使用して配列をループしながら、特定の1つの要素の状態を更新する方法。
<View style={{ marginBottom: 20 }}>
{
this.props.addresses.map(addr => {
return (
<View style={{ marginRight: 10 }} key={addr.label}>
<View>
<Text style={styles.labelTextStyle}>{addr.label}</Text>
</View>
</View>
);
})
}
</View>
イベントの発生時に特定の要素（addr.label）の状態を更新するにはどうすればよいですか？
setStateをループ内で直接呼び出すことはできません
反応ドキュメントから：
setState（）はthis.stateをすぐに変更しませんが、保留中の状態遷移を作成します。このメソッドを呼び出した後にthis.stateにアクセスすると、既存の値が返される可能性があります。setStateへの呼び出しの同期操作の保証はなく、パフォーマンスを向上させるために呼び出しをバッチ処理することができます。
あなたにできることは
eventHandler(idx, val) {
var newState = {}
newState[idx] = val;
this.setState(newState);
}
ビューに、ハンドラーをトリガーする必要のあるボタンがあるとします。
<View style={{ marginBottom: 20 }}>
{
this.props.addresses.map(addr, idx => {
return (
<View style={{ marginRight: 10 }} key={addr.label}>
<View>
<Text style={styles.labelTextStyle}>{addr.label}</Text>
<Button onPress={this.eventHandler.bind(this, idx, addr.label}><Button>
</View>
</View>
);
})
}
</View>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加