несколько флажков перезаписывают друг друга в реагировать родной

Question

У меня есть список условий, мне нужно поставить флажки рядом с. Я смог сделать это, но теперь, когда введена вторая галочка, первая исчезает. Мой код выглядит следующим образом:

import React, {useState} from 'react';
import {View, Text, Button} from 'react-native';
import styles from './Styles';
import { CheckBox } from 'react-native-elements'


export default class Symptoms extends React.Component {
state = {
    checkedId: 'false',
    checkboxes: [
        {id: 1, title: "Fever"},
        {id: 2, title: "Headache"},
     ]
  }

  handleCheck = (checkedId) => {
    this.setState({checkedId})
  }

render() {
    const { checkboxes, checkedId } = this.state

  return (
    <View style={{ flex: 1, backgroundColor: styles.scrollStyle.backgroundColor, alignItems: 'center', justifyContent: 'center' }}>

        <View>
                {checkboxes.map(checkbox => (
                    <CheckBox
                    center
                    iconRight
                    checkedIcon='check-circle-o'
                    uncheckedIcon='circle-o'
                    checkedColor='#122fae'
                    uncheckedColor='#122fae'
                    key={checkbox.id}
                    title={checkbox.title}
                    checked={checkbox.id == checkedId}
                    onPress={() => this.handleCheck(checkbox.id)}

                    />
                ))}
        </View>
     </View>
  );
}

}

Answer 1

Вам нужен каждый флажок, чтобы отслеживать, установлен ли он или нет. Сейчас вы только отслеживаете, какая последняя проверка была с checkId. Я бы посоветовал полностью удалить checkId и отслеживать в состоянии, установлен ли флажок или нет по его идентификатору. Вы также можете извлечь определение флажка в его собственную константу, поскольку оно не изменяется, вместо того, чтобы создавать его заново при каждом рендеринге.

Что-то подобное может работать (полностью не проверено, извините, но, надеюсь, это начало) :

const checkboxes = [
  { id: 1, title: 'Fever' },
  { id: 2, title: 'Headache' }
]

const Symptoms = () => {
  const [checked, setChecked] = useState({});

  return (
    <View style={{ flex: 1, backgroundColor: styles.scrollStyle.backgroundColor, alignItems: 'center', justifyContent: 'center' }}>
      <View>
        {checkboxes.map(checkbox => {
          const isChecked = checked[checkbox.id];

          return (
            <CheckBox
              center
              iconRight
              checkedIcon='check-circle-o'
              uncheckedIcon='circle-o'
              checkedColor='#122fae'
              uncheckedColor='#122fae'
              key={checkbox.id}
              title={checkbox.title}
              checked={isChecked === true}
              onPress={() => setChecked({...checked, [checkbox.id]: !isChecked})} />
          ));
        }}
      </View>
    </View>
 );
}

export default Symptoms;