Как использовать флажок в React Native в функции карты JavaScript?

Question

Я создаю приложение React Native, в котором я использую флажок в функции карты javascript.Из-за этого, когда я проверяю один флажок, он также проверяет все остальные флажки.Как можно проверить флажки отдельно, а также я мог проверить их несколько раз из списка функций карты.

Вот код для некоторых ссылок:

<Card noShadow style={styles.card}>
                    <CardItem header bordered>
                        <Text style={styles.header}>{string.color}</Text>
                    </CardItem>
                    {this.state.details.map((data, i) => {
                        return (
                            <List key={i}>
                                <CardItem>
                                    <CheckBox style={styles.checkbox}
                                        checked={this.state.checkedDefault} onPress={() => this.setState({ checkedDefault: !this.state.checkedDefault })} />
                                    <Text note style={styles.textWrap}>{data.name}</Text>
                                </CardItem>
                            </List>
                        )
                    })}
                </Card>

Answer 1

Для этого вам нужно использовать объект, измените метод рендеринга, как показано ниже

<Card noShadow style={styles.card}>
    <CardItem header bordered>
        <Text style={styles.header}>{string.color}</Text>
    </CardItem>
    {this.state.details.map((data, i) => {
        return (
            <List key={i}>
                <CardItem>
                    <CheckBox style={styles.checkbox}
                        checked={!!this.state.checkedDefault[i]}
                        onPress={
                            () => this.setState(state => {
                                const checkedDefault = {...state.checkedDefault};
                                checkedDefault[i] = !checkedDefault[i];
                                return { checkedDefault }
                            })
                        } />
                    <Text note style={styles.textWrap}>{data.name}</Text>
                </CardItem>
            </List>
        )
    })}
</Card>

, не забудьте назначить начальное значение для checkedDefault в состоянии, как показано ниже

state = {
   //other values
   checkedDefault: {}
}

Также можно использовать свойство id, если оно существует для элементов в массиве details вместо i, чтобы присвоить значение в объекте